Styling the div/iframe

[andytate1968]

<powerbi-report [embedConfig]="reportConfig" [phasedEmbedding]="phasedEmbeddingFlag" [eventHandlers]="eventHandlersMap">

How can I set the height and width of the iFrame that is produced? Also, how can I get the report to align to the left of the iFrame? Currently it shows a 150px height iFrame. I want to also be able to set the border to none. I know you can pass a css class to it but can't find what you can set using that i.e. what is the format of it?

[mratanusarkar]

Hello, I am having the same rendering issue!! even if I have the whole page available, and the parent div can occupy the full page, still the <div class="report-container">, <powerbi-report> and the <iframe> is taking up fixed height (around 150px)!!

I have no issues with the width, and it is easily manipulated with the below settings in reportConfig: IReportEmbedConfiguration

settings: {
    filterPaneEnabled: false,
    navContentPaneEnabled: false,
    layoutType: models.LayoutType.Custom,
    customLayout: {
        displayOption: models.DisplayOption.FitToWidth
    }
}

Please refer attached screenshot for the issue:

• the iframe and powerbi-report is getting rendered with fixed height
• unable to disable scroll bar and make the report iframe overflow
• custom css with !important is not making any impact to make the embedded report full screen

[LuisCarlosRajoy]

Hi, I've been facing this same issue and found a "css workaround" in my case I'm using Angular 12 , in my template's main styles css file, I've addded the following line:

powerbi-report > div {
  height: (your height)px!important;
}

Quick note, I've tried in my component stylesheet file first, and didn't work.

[KotanaSai21]

Refer to component and