Forum Discussion

callum's avatar
callum
Helper II
9 years ago
Solved

Referring to the visual's iframe element from CSS

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 ...
Need Help
  • v-viig's avatar
    v-viig
    9 years ago

    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

    [email protected]

callum's avatar
callum
Helper II
9 years ago

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's avatar
mehul2010
Frequent Visitor
8 years ago
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;
 
}