<powerbi-report> component and <iframe> rendering with fixed height instead of full screen

[mratanusarkar]

Hello, I have been trying to render a Power BI report into an Angular project, but unable to make the report render in full screen.

With some settings and config modifications, I could make it take up full width, but the height seems to be always fixed to ~150px.

On making the width "FitToWidth" (refer to the below config code in ts file), the iframe/div isn't getting maximized to max height, even if there is enough parent div space is available. Instead a scroll bar is popping up, which remains unaffected with forced scrollbar and overflow css.

Please suggest a solution or implement features to:

• allow similar settings for "FitFullScreen" or "FitToHeight" along with the existing "FitToWidth"
  (to make the report iFrame render to fullscreen and take up full available space in the parent-div)
• provide options to inject custom css or style to <powerbi-report>
• provide documentation for reportClass in [cssClassName]="reportClass" for existing supported classes
• allow more options for reportClass in [cssClassName]="reportClass"
• allow more custom settings in [embedConfig]="reportConfig" to support all types of scenarios and use cases
  (as mentioned in point no 1)

In typescript file, the reportConfig: IReportEmbedConfiguration for making the report take up full width:

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

In html, code to render powerbi-report:

<div class="row">
    <div class="col-md-12">
        <powerbi-report [embedConfig]="reportConfig" [cssClassName]="reportClass" [phasedEmbedding]="phasedEmbeddingFlag" [eventHandlers]="eventHandlersMap">
        </powerbi-report>
    </div>
</div>

Please refer to the attached screenshot for the issue:

[ginobili]

@mratanusarkar have you tried to disable viewencapsulation in your component? Somehow the styles aren't applied

[mratanusarkar]

@ginobili where do I get viewencapsulation?
could you please guide me where to find the same or share some code-snippets?

[jameseisapp]

@mratanusarkar I had the same issue as you. In your Angular app under the root directory, there is a styles.css that is where you need to put the .report-container styling class.

[mratanusarkar]

@jameseisapp thanks! the css seems to be working when applied from root/styles stylesheet file.

.report-container {
  height: 630px !important;
}

but again, with height: 100% it doesn't work, and it's back to the same issue with small fixed height ~150px.
Is there any way, so that the powerbi report-container will take up the full available height (space between header & footer, without overflow), and without hardcoding the height in px?

For reference, here is the sample poc codebase that I am working on: https://github.com/mratanusarkar/Angular-PowerBI-POC

[jameseisapp]

@mratanusarkar yes, try viewport height, see what I'm using below for my application.

.report-container {
height: 75vh;
margin: 8px auto;
width: 90%;
}

[patrickoneill46]

@jameseisapp thanks! the css seems to be working when applied from root/styles stylesheet file.

.report-container {
  height: 630px !important;
}

but again, with height: 100% it doesn't work, and it's back to the same issue with small fixed height ~150px. Is there any way, so that the powerbi report-container will take up the full available height (space between header & footer, without overflow), and without hardcoding the height in px?

For reference, here is the sample poc codebase that I am working on: https://github.com/mratanusarkar/Angular-PowerBI-POC

Trying this myself. Come on guys, this is absolutely pathetic engineering work that you can't get something as simple as height correct and configurable. It is fixed to 150px by default, only way to oveerride is with the !important tag which most decent engineers know is a bad approach

Get it together, please!

[mratanusarkar]

@patrickoneill46 I have been playing with the styles as suggested by @jameseisapp,
trying different css units like %, px, vh, em, rem, etc and also display-flex, col-md, etc.

but again, it's not like the perfect "one stop" solution!
It's like a temporary fix, that works differently with different cases.

for example, I have a project where there are sidebar, header, footer and tiles, where various components have different css units due to legacy codebase.... and the .report-container css override simply doesn't work there, as the components keep changing dimensions according to various situations. There should be something dynamic instead of hard-coding the height.

My point is, if the width works perfectly with customLayout: { displayOption: models.DisplayOption.FitToWidth }, why isn't there something out of the box for height too, that will auto modify the height according to the parent div/component's height???

[cosmoKenney]

I am facing this same issue. In fact, there aren't even any elements in the html that have the report-container class.

The iframe that the report is rendered in has style="width: 100%; height: 100%;"

But as everyone knows setting height to 100% on an iframe isn't enough.

[KotanaSai21]

@cosmoKenney
Default height of iframe is 150px. Specifying style="width: 100%; height: 100%;" for iframe, makes the iframe to take default height of 150px.

We need to provide height to parent div specifically, where our iframe is embedded and it will take the default height of div container.

report-container is class name passed as input, and we use this report-container class name to set stylings for div where iframe is embedded in the package

[cosmoKenney]

@KotanaSai21 are you saying to use the [cssClassName] attribute input on the component?
Like: <powerbi-report [cssClassName]='report-container'></powerbi-report>?

[enylton]

IMHO, report-container is already passed to <powerbi-report>
File demo/src/app/app.component.ts, line 38, defines reportClass = 'report-container';

This demo code defines report-container in 2 .css files:

• demo/src/app/app.component.css lines 94-98
• demo/src/styles.css lines 24-28

As mentioned by @jameseisapp , the definition in demo/src/styles.css is the one applied. As per Angular documentation https://angular.io/guide/component-styles:

Reminder: the styles in the style file apply only to this component. They are not inherited by any components nested within the template nor by any content projected into the component.

The component <powerbi-report> is nested and not able to access the style in app.component.css, thus the need for the definition in the global style file.

Another route, as @ginobili suggested, would be to set ViewEncapsulation.None https://angular.io/guide/view-encapsulation

Is this correct, @KotanaSai21 ?

[KotanaSai21]

@enylton , Yes, You're indeed correct. Thanks for pointing this out. We will be removing styling for container in app.component.css.

@cosmoKenney , Yes, Correct. Please note that to Apply styling to report-container in styles.css file. Feel free to reach out if you're facing any other queries.

[mratanusarkar]

guys, I checked out my old project and I am sharing the workaround I found back then,
which I used to make my PBI report occupy the full height.

I have updated those changes to the dummy POC project, check it out if it helps.
Full POC Project: Angular-PowerBI-POC
PR with changes: temp fix to full height issue

Summary in short:
I had tried a lot of CSS overriding and played around with the report-div.
In the end, the following changes gave me a workaround:

1. using the height of different div elements in vh instead of px
2. using displayOption in the ts file, for reportConfig: IReportEmbedConfiguration as:

customLayout: {
    displayOption: models.DisplayOption.FitToPage
}

3. overriding report-container in styles.scss with the following:

report-container {
    height: 81vh;
    margin: 8px auto;
    width: 100%;
}

Modify according to your need, and see if this helps in any way or fixes the issue in your projects.

[cosmoKenney]

@enylton
Setting the cssClassName attribute is absolutely required. Please see this image:

The term report-container is no where to be found in the rendered elements.
However once I set it in the template:

<powerbi-report [embedConfig]="reportConfig" [cssClassName]="'report-container'"></powerbi-report>

Everything works as described above.

@KotanaSai21, @mratanusarkar, thanks for the input.