topic Re: Referring to the visual's iframe element from CSS in Developer

Referring to the visual's iframe element from CSS

callum — Mon, 21 Aug 2017 16:07:59 GMT

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?

callum — Mon, 21 Aug 2017 16:09:55 GMT

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...

v-viig — Tue, 22 Aug 2017 08:28:18 GMT

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

mehul2010 — Sun, 15 Apr 2018 05:28:57 GMT

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;

}

mehul2010 — Sun, 15 Apr 2018 05:31:05 GMT

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;

}