Qlik Community

Qlik Sense Integration, Extensions, & APIs

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

Announcements
Qlik® Product Spotlight: Discover what’s possible. Get more from our products.
See for yourself. Register today.
Highlighted
zrednaz1
New Contributor

Div integration: Conflict between qlik-styles.css and our styles

Hi all,

We are building a website with embedded Qlik content using div integration. The integration relies on /autogenerated/qlik-styles.css which is fetched from the Qlik web server and applied to our pages that need to display Qlik content.

The problem is that qlik-styles.css interferes with the fonts defined in our own stylesheet. This could normally be solved by placing !important on some of our own styles, but the problem is that qlik-styles.css itself uses !important on the classes that are conflicting.

How do people usually go about solving this? For example, is it possible to only apply qlik-styles.css to a specific div - the one that contains the Qlik content?

1 Solution

Accepted Solutions
rbartley
Valued Contributor

Re: Div integration: Conflict between qlik-styles.css and our styles

Hi,

 

Are you able to specify the order of the css files?  If so, try changing the order.

3 Replies
rbartley
Valued Contributor

Re: Div integration: Conflict between qlik-styles.css and our styles

Hi,

 

Are you able to specify the order of the css files?  If so, try changing the order.

zrednaz1
New Contributor

Re: Div integration: Conflict between qlik-styles.css and our styles

If I am not mistaken, this could be sovled by adding !important in a few places in our own stylesheet AND loading our own stylesheet last.

Currently, the Qlik stylesheet is loaded last (dynamically added to the page header by the page component that displays Qlik).

I will explore whether we can add our own stylesheet after Qlik. It might involve making the Qlik component somehow reload our stylesheet after loading the Qlik one, and that starts to get a bit ugly. But if that's what it takes...

Edit: It occured to me that I might be able to use http://api.jquery.com/after/ to make the JS insert the Qlik styles before our own styles in the document head. Will explore this option first.

zrednaz1
New Contributor

Re: Div integration: Conflict between qlik-styles.css and our styles

OK, I got things working by:

1) Changing the order of the stylesheets in our <head> element (inserting qlik-styles.css before our own stylesheet).
2) Adding !important to our own stylesheet's body {font-family: ...} section.