Trying to manipulate css of an iframe integration

[SBDataspark]

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.

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.

[rbartley]

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?

[SBDataspark]

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.

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]

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.