Extension with bootstrap.js/.css issues

[rbecher]

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

[Stefan_Walther · Accepted solution]

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

[rbecher]

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

[Stefan_Walther]

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

[rbecher]

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.. 😉

[rbecher]

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

Best regards,

Ralf

[Stefan_Walther]

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