Qlik Community

Integration, Extension & APIs

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

Announcements
QlikWorld 2022, LIVE in Denver CO., May 16-19, 2022. REGISTER NOW TO RECEIVE EARLY BIRD PRICING
cancel
Showing results for 
Search instead for 
Did you mean: 
Sebb
Contributor III
Contributor III

Trying to manipulate css of an iframe integration

Hi there fellow Qlik users,

I'm integrating a sheet by the standard iframe integration.

This works ok, but there's a slight little styling issue that I'd like to solve.

When using the "Horizon" theme the background of the sheet is light gray.

But in the iframe integration this is partiallly gray.

Sebb_0-1616090832391.png

I've found the element on the page responsible for it, but I can't manage to manipulate the css by jquery.

The element is:

<article qva-radial-context-menu="openContextMenu($event)" qva-context-menu="openContextMenu($event)" id="content" ng-class="{'selections-disabled' : noSelections}"><div style="position:relative;width:100%;height: 100%" class="qvt-sheet"><div style="position:absolute;left: 0%;top: 0%;width: calc(13.88888888888889% - 10px);height: calc(11.11111111111111% - 10px);margin: 5px" data-qid="a052d349-ab4a-4061-a6c4-9d5e1779eaa5" col="0" row="0" tabindex="0">

This is my javascript with the id of the iframe. And I try to set the new backgroud color of the element after 10 seconds. This is just a first try. Will try to make it more complex after I manage to get this done.
 
$('#dashboardiframe').on('load'function(){
        setTimeout(function() {
          $('#dashboardiframe').contents().find('div.single-object #content').css("background-color","#f2f2f2");
      }, 10000); 

 

Also injecting a style tag inside the iframe doesn't work.
Is anything preventing me from editing the contents of the iframe?

Anyone an idea?

Kind regards,

Sebb.

3 Replies
rbartley
Specialist
Specialist

Hi Sebb,

As far as I am aware, nothing should prevent you modifying the content. However, I suppose it comes down to the timing of the loading of the iframe content and when the default styling is applied.  Have you looked in the dev-tools/console to see which style is actually being applied? Do you have any other extensions on your page that set override any qlik styles?

Sebb
Contributor III
Contributor III
Author

Hi Rbartley,

Thanks for the reply!

When trying to manipulate the element with jquery I checked the dev-tools/console first to find the right element and changed the css manually in the "Elements" tab to "preview" what I want.

Sebb_0-1616147070092.png

And that works.

When I change the "Background-color in the dev-tools/console the change is applied.

But when I use the script I put in my question it doesn't work.
Maybe there's something wrong with my jquery selector?

Kind regards,

Sebb

rbartley
Specialist
Specialist

Why not try writing out the object to the console (or step through your code) using console.log?  That'll tell you whether the object you're looking for exists at the time you are trying to apply the style.