Referring to the visual's iframe element from CSS

[callum]

Hi,

Is it possible to do this? For example to set the background of my visual, I've tried the following:

#sandbox-host{
    background:black;
}

but it has no effect.

Strangely enough, in the visual's TypeScript I can set it with d3 like 

d3.select(this.host).style("background", "black");

so it is possible to style it, just not via pure CSS it seems.

Am I doing something wrong?

[mehul2010]

inside constructor make one HTML element as below:

let svg = this.svg = d3.select(options.element).append('svg').classed("svg-content",true);

inside visual.less file add,

.svg-content {

background-color: black;

}

[callum]

I've just discovered that it's even possible to set it via d3 with 

d3.select("#sandbox-host").style("background", "black");

so it can't be an issue with the syntax or spelling of the selector I'm using...

[mehul2010]

You can create one svg element or any div element as below:

inside constructor:

let svg = this.svg = d3.select(options.element).append('svg').classed("svg-content",true);

inside visual.less file:

.svg-content {

background-color: black;

}

[v-viig · Accepted solution]

This issue is related to the fact that PBIVIZ tools encapsulate CSS by including GUID of the visual as a prefix for all of selectors.

Our recommendation is to include an extra DOM element and apply styles to this element.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com