Forum Discussion

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

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]

4 Replies

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...
- v-viig
  Community Champion
  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]
- 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;
  
  }
mehul2010
Frequent Visitor
8 years ago
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;

}