topic Re: jQuery UI overrides QS CSS in Integration, Extension & APIs

jQuery UI overrides QS CSS

nsrebrev — Mon, 10 Jan 2022 16:15:18 GMT

Hi everybody,

I am trying to write an extension which uses the jQuery slider widget (Slider Widget | jQuery UI API Documentation). In order to work, it needs the jQuery UI CSS file. Unfortunately, this css file overrides the css settings of QS, and some of the objects on my QS page change. For example, the properties section in edit mode starts to look like this:

Is there any way I could use the jQuery UI CSS file without it interfering with QS's styling?

Thanks in advance,

Nikolay

Re: jQuery UI overrides QS CSS

rbartley — Mon, 10 Jan 2022 17:09:38 GMT

Hi Nikolay,

You could try downloading a local copy of the JQuery UI CSS and reference that instead of the CDN version, then modify or comment out the styles that are overriding the Qlik styles.

Re: jQuery UI overrides QS CSS

nsrebrev — Thu, 13 Jan 2022 16:09:51 GMT

Thank you for the answer! I downloaded a local copy and additionally scoped the CSS file (using the CSS scope in the Custom Download section) to apply the design only to my extension object. This way I did not have to comment out any styles. Everything works as expected now!