Div integration: Conflict between qlik-styles.css and our styles
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?
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.
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%;">