Qlik Community

Qlik Sense Integration, Extensions, & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

MVP
MVP

Extension with bootstrap.js/.css issues

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:

bootstrap1.PNGbootstrap2.PNG

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

- Ralf

1 Solution

Accepted Solutions
Employee
Employee

Re: Extension with bootstrap.js/.css issues

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

6 Replies
Employee
Employee

Re: Extension with bootstrap.js/.css issues

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

MVP
MVP

Re: Extension with bootstrap.js/.css issues

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

Employee
Employee

Re: Extension with bootstrap.js/.css issues

MVP
MVP

Re: Extension with bootstrap.js/.css issues

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.. ;-)

MVP
MVP

Re: Extension with bootstrap.js/.css issues

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

Best regards,

Ralf

Employee
Employee

Re: Extension with bootstrap.js/.css issues

Community Browser