Fit content to angular powerBi client iframe

Question

I have a couple of reports designed in power BI. The problem is as follows: The iframe I have created has a height of 80rem (that's fine). The problem is that in the event that the report is of a lower height there is a blank space that I want to remove.

I have been testing with css and if I make it smaller the height of the iframe other reports are cut, if I remove the height the report stays with a size of 300w x 150h, I have also tried reading using pages layout (I don't know how to use it because I don't know where the key is taken from), display option and visual layout. All this without success. The guide I use is the following: https://github.com/Microsoft/PowerBI-JavaScript/wiki/Custom-Layout

reading that I feel that it is solved with pages layout but I don't know how to use it. Do you have a solution? Thanks in advance.

The power bi config is this:

  this.config = {
        accessToken: accessToken && accessToken.currentValue ? accessToken.currentValue : this.config.accessToken,
        tokenType: tokenType && tokenType.currentValue ? this.getTokenType(tokenType.currentValue) : this.config.tokenType,
        embedUrl: embedUrl && embedUrl.currentValue ? embedUrl.currentValue : this.config.embedUrl,
        type: type && type.currentValue ? type.currentValue : this.config.type,
        id: id && id.currentValue ? id.currentValue : this.config.id,
        filters: filtersExternal && filtersExternal.currentValue ? filtersExternal.currentValue : this.config.filters,
        ...this.fixedConfig
    };

And Fixed config:

 // Fixed configuration
fixedConfig: IEmbedConfiguration = {
    settings: {
        navContentPaneEnabled: false,
        filterPaneEnabled: false,
        customLayout: {
            pageSize: {
                type: models.PageSizeType.Custom,
                height: 600,
                width: 1300
            }
        }
    }
};

score 2 · Answer 1 · answered Feb 09 '21 at 14:23

This is working for me to resize the the power bi report in UI

 this.reportService.getReportObject(reportName).subscribe(res => {
       
        this.reportmodel = res;
        this.config = {
            type: res.reportType,
            id: res.id,
            accessToken: res.embedToken.token,
            embedUrl: res.embedUrl,
            permissions: pbi.models.Permissions.All,
            tokenType: pbi.models.TokenType.Embed,
            viewMode: pbi.models.ViewMode.View,
            settings: {
                filterPaneEnabled: false,
                navContentPaneEnabled: navigation,
                layoutType: pbi.models.LayoutType.Custom,
                customLayout: {
                   displayOption: pbi.models.DisplayOption.FitToWidth
                }
            }
        };
        this.hideloader(); 
        this.pbiContainerElement =  document.getElementById('pbi-container');
        this.powerBiService = new NgxPowerBiService();
        this.powerBiService.reset(this.pbiContainerElement);
        const reportobj = this.powerBiService.embed(this.pbiContainerElement, this.config) as pbi.Report;
        reportobj.off('loaded');
        reportobj.on('loaded', () => {
            reportobj.setPage(this.reportmodel.pageName);
                 });
    },
    err => {
        this.hideloader();
        console.log(err);
        this.dashboardLoadError = true;
        throw new Error('Exception occured while rendering the dashboard:' + err);
    });

score 1 · Accepted Answer · answered May 07 '20 at 11:39

Good Morning,

Finally I discovered that my problem was that in order to maintain the 16: 9 aspect ratio on certain screens, the height decreased a lot. To solve it was as simple as modifying the height of the container div of the iframe depending on the width of the screen:

    @media only screen and (max-width: 1600px) {
        // TODO: A variable
        height: 60rem;
    }
    @media only screen and (max-width: 1300px) {
        // TODO: A variable
        height: 55rem;
    }
    @media only screen and (max-width: 800px) {
        // TODO: A variable
        height: 35rem;
    }

that way the iframe adjusts to the content of the report.

My HTML div & iframe:

    <div class="tn-powerbi__frame" [ngClass]="{ 'tn-powerbi__frame--fullscreen': fullscreen,'tn-powerbi__frame--insurtech': reportId===20  }" #powerbiFrame></div>

Iván Allué

Fit content to angular powerBi client iframe

2 Answers2