Solved: Re: Div integration: Conflict between qlik-styles.... - Qlik Community

zrednaz1 · ‎2019-01-09

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?

rbartley · ‎2019-01-09

Hi,

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

View solution in original post

rbartley · ‎2019-01-09

Hi,

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

zrednaz1 · ‎2019-01-09

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 · ‎2019-01-09

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 · ‎2020-08-21

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?

vegard_bakke · ‎2021-10-15

Latest update: Qlik R&D are aware of the problem.

"Qlik R&D's reply is that they do not plan to fix it in the capability APIs, but are considering this as an improvement for mashups created with nebula.js."

~~As for Nebula?~~

~~The nebula.js API has the stability index: Experimental~~
~~This API is under development. Do not rely on it. It may change or be removed in future versions.~~

~~jeez... I give up...~~

EDIT: Sorry. I must have checked an earlier version, apparently. Thank you for correcting me, @tsm.

tsm · ‎2021-10-18

Hey,

Nebula is actually not experimental but very much stable. While it is developing, it already covers a lot of the features that the capability APIs offer. The most common issue is the range of visualizations that are supported, but that list has grown substantially and continues to do so.

Nebula API stability index: https://help.qlik.com/en-US/sense-developer/August2021/Subsystems/APIs/Content/Sense_ClientAPIs/nebu...
Specification and docs: https://qlik.dev/apis/#javascript-api-nebulajs-stardust and https://qlik.dev/libraries-and-tools/nebulajs

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