topic Re: Extension with bootstrap.js/.css issues in Integration, Extension & APIs

Extension with bootstrap.js/.css issues

rbecher — Tue, 17 Mar 2015 16:22:09 GMT

Hi all,

I use bootstrap in an extension but it creates a lot of layout issues if I switch into edit mode. Labels disappear or get smaller:

Any idea? I think this is some AngularJS/bootstrap intolerance..

- Ralf

Re: Extension with bootstrap.js/.css issues

Stefan_Walther — Tue, 17 Mar 2015 16:30:56 GMT

Hi Ralf,

that's a tricky one, but solved it in some extensions.

The best way I have come up with is to "scope" the Bootstrap CSS to only the CSS namespace of your extensions, so that all classes only work within the CSS-class of your extension. So you have to re-create the Bootstrap CSS ...

It would also work with .class:scope (:scope - CSS | MDN) but unfortunately this is not widely supported yet, actually only Firefox (http://caniuse.com/#search=scope)

Another way I am using in smaller extensions is just to create a subset of the needed classes, buttons, etc. for usage in my extension. The full Bootstrap CSS is overkill anyhow since some concepts (e.g. Grid-system) conflicts with the CSS-concept of Qlik Sense.

Hmm, let's see if I can add an example to my qsExtensionPlayground

Hope this helps a bit.

Regards

Stefan

Re: Extension with bootstrap.js/.css issues

rbecher — Tue, 17 Mar 2015 19:07:18 GMT

Hi Stefan,

thanks for your advice! I followed your hint to create a subset of the needed classes. But this is real hard work since it is not very obvious what to keep ...

- Ralf

Re: Extension with bootstrap.js/.css issues

Stefan_Walther — Tue, 17 Mar 2015 20:42:39 GMT

Hi,

actually it's not too hard, have a look here:

http://www.qlikblog.at/3245/using-bootstrap-css-in-qlik-sense-visualization-extensions/

Sample solution here: https://github.com/stefanwalther/qsExtensionPlayground/tree/master/Bootstrap

Regards

Stefan

Re: Extension with bootstrap.js/.css issues

rbecher — Tue, 17 Mar 2015 21:25:17 GMT

Well, yours is the professional solution. I will try this later but need to get into the topic a bit more.

At the moment, I did a raw hack of the bootstrap.css file where I deleted all except what I (guessed) is needed for my extension.. 😉

Re: Extension with bootstrap.js/.css issues

rbecher — Tue, 17 Mar 2015 21:32:28 GMT

Btw. why not posting the file scoped-bootstrap.css itself here or in Branch?

Best regards,

Ralf

Re: Extension with bootstrap.js/.css issues

Stefan_Walther — Wed, 18 Mar 2015 07:49:27 GMT

😉 Here's the link to it: qsExtensionPlayground/scoped-bootstrap.css at master · stefanwalther/qsExtensionPlayground · GitHub