Qlik Community

Ask a Question

Integration, Extension & APIs

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

Announcements
Our next Qlik Insider session will cover new key capabilities. Join us August 11th REGISTER TODAY
cancel
Showing results for 
Search instead for 
Did you mean: 
zrednaz1
Partner
Partner

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
Specialist
Specialist

Hi,

 

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

View solution in original post

4 Replies
rbartley
Specialist
Specialist

Hi,

 

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

View solution in original post

zrednaz1
Partner
Partner
Author

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
Partner
Partner
Author

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.

7n9bauijtrugl24
Partner
Partner

We recently upgraded Qlik from Nov 2019 Patch 2 to June 2020 Patch 3 and we've noticed that Qlik is apparently dynamically injecting styles into our page using <style> tags, and then, in some places, uses these embedded styles instead of the styles in qlik-styles.css.

Old Qlik:
<button class="lui-fade-button" title="AV" style="display: flex; width: 100%;">

New Qlik:
<button class="q2fc498 q2fc469 q2fc471 q2fc484 q2fc490" tabindex="-1" type="button" title="AV" style="display: flex; align-items: center; width: 100;">

As you can see, this button is no longer using lui-fade-button which is defined in qlik-styles.css.  Instead, it's using styles embedded in the page: "q2fc498 q2fc469 q2fc471 q2fc484 q2fc490"

Is anyone else experiencing this behavior?