How to add CSS to PowerBI report embedded in Angular application as iframe?

user_2066895 0
Viewed 206

How can I add some external (or in any other way) CSS to PowerBI report embedded in Angular application as iframe? I need to remove the scrollbar from it, so I need to add this, so that the report fits better inside the iframe of the angular page:

.explorationContainer .exploreCanvas .canvasFlexBox {
  height: inherit !important;
}

for the love of me, I couldn't find a way to insert it. I tried putting it in styles.scss of the angular app, but no go.

powerbi angular external css
1 Answers

I don't think you can, and when I was implementing my solution I couldn't make anything work other than setting a fixed value to the height of the external container.

In the end what I did was to set the div height when loading the powerBI report, what I used on my solution was this (fills the height up to the bottom of the screen):

let yPosition = powerBIdiv.getBoundingClientRect().y;
powerBIdiv.style["height"] = `calc(100vh - ${yPosition}px)`;
user_13090270
Related