CODEWITHSUNDEEP
htmlcsspowerbi-embedded
Vince Horst
Vince Horst

Reputation: 5358

Power BI Embedded report has random visual artifacts - labels overlap with visuals

Using Power BI embedded, I've embedded reports into a web page. The reports render perfectly the vast majority of the time. Rarely and seemingly randomly, the report has visual artifacts: labels overlap with the visuals. I can't figure out what's causing it or see a pattern when the oddities appear.

Power BI Embedded labels overlap visuals

Upvotes: 0

Views: 48

Answers (1)

Vince Horst
Vince Horst

Reputation: 5358

Fixed! Microsoft acknowledges there is a known issue with Power BI Embedded reports:

When embedding a report or other Power BI items, make sure that the embed container is part of the DOM and that the display CSS attribute is not set to none as this can cause unexpected behaviors. If you want to hide the embed container, consider using the visibility CSS attribute.

I was in fact using a CSS with display:none to show/hide reports on screen as the user navigates a menu of reports.

In my case, I was able to simply change the hide CSS class to set the element width to zero, which had the same visual effect. My approach may or may not work for you depending on your situation's requirements.

Before (bad):

.hide {
    display:none;
}

After (good):

.hide {
    width:0;
}

Upvotes: 0

Related Questions