Solved: Re: Preventing Qlik CSS from "infecting" the rest ... - Qlik Community

master_t

I'm developing a web application that includes a Qlik Sense mashup (using Qlik Sense Enterprise on Windows).

I do not want to use the <iframe> approach because I want to make invocations to the Qlik Sense engine etc. so I need the "qlik" object from Require, and thus I am including the require script in my website's <head>:

/resources/assets/external/requirejs/require.js

However, here come the problem: as soon as the script starts loading, it start adding other scripts and CSS files to the web page. The problem with this is that those CSS stylesheets do not have any kind of "insulation" and apply very destructive changes to the style of all elements of the page, for example as you can see they set the padding and margin of ALL elements to zero:

So all the other elements on my web app that have nothing to do with Qlik have their layout, fonts, etc. changed, creating a huge mess.

Is there a good way to prevent this?

master_t

I "solved" this by having the mashup section of my app in a sub-site that I then host in the main app as an iframe. Not a pretty solution, but it works and it's better than overriding hundreds of random CSS rules that come in unwanted.

In general, if I may be so bold, I think this is bad design on Qlik's part. The CSS that come in should have all rules class-prefixed so it doesn't apply to the rest of the app unless the developer wants to.

View solution in original post

alex_colombo

Hey @master_t could you please describe what are you trying to do? You mentioned that you just need "qlik" object, what you are going to do with qlik object? Do you need to read only data from Qlik app or you are going to embed Qlik visualizations?
About CSS, there is no way to prevent this. You have to override what Qlik css will do using your own CSS properties.

master_t

I am embedding Qlik visualizations, thus why I need the script and CSS.

alex_colombo

Ok, so no way of preventing this. Qlik CSS files are needed for render Qlik visualizations correctly.

master_t

I "solved" this by having the mashup section of my app in a sub-site that I then host in the main app as an iframe. Not a pretty solution, but it works and it's better than overriding hundreds of random CSS rules that come in unwanted.

In general, if I may be so bold, I think this is bad design on Qlik's part. The CSS that come in should have all rules class-prefixed so it doesn't apply to the rest of the app unless the developer wants to.

Preventing Qlik CSS from "infecting" the rest of the website in a mashup

Integration

Visualization