Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

Reply
asbpowerbi
Helper IV
Helper IV

Scroll bar will not appear in embedded report

Hello All,

 

  My developer is embeding my PowerBI report in a webpage.  On one of the tabs in the report, I changed the canvas zixe to be 1500px high and 1280px wide. When I display the report in the webpage, that tab is shrunk to fit within the space provided. When I asked my developer about this issue I was told:

 

"When it goes into the webpage, it gets displayed as a HTML page (the Power BI report) within an iFrame, within a div.

 

I can put scrollbars on the parent div. But that doesn’t help anything. The report ends up being the same size as the iFrame, and I can’t seem to put scrollbars on the iFrame. Even if I unnaturally zoom the report to 200%, the iFrame will only show the top portion of the report with no way to scroll around."

 

Do I have to change something in the report setting for the scroll bar to appear? Below is an image of the report in the Iframe:

 

asbpowerbi_1-1678900270563.png

 

Thanks for your help!

 

Cheers!

 

Peter

1 ACCEPTED SOLUTION
v-rzhou-msft
Community Support
Community Support

Hi @asbpowerbi ,

 

Here I suggest you to try adding the "displayOption" property with value "FitToWidth" in customLayout object, as this option will try to fit the report as per the total available size for the page and will introduce a scrollbar for the remaining part if necessary.

Also change "Widescreen" to "Custom" in pageSizeType object.

You can refer to this code.

var embedConfiguration = {
    type: 'report',
    id: '{{txtembedreportid}}',
    embedUrl: '{{txtreportembed}}',
    tokenType: models.TokenType.Embed,
    accessToken: '{{txtaccesstoken}}',
    settings: {
            layoutType: models.LayoutType.Custom,
            customLayout: {
                displayOption: models.DisplayOption.FitToWidth, // Add "FitToWidth"
                pageSize: {
                    type: models.PageSizeType.Custom, // Change to "Custom"
                }
            },
            panes:{
                bookmarks: {
                    visible: false
                },
                fields: {
                    expanded: false
                },
                filters: {
                    expanded: false,
                    visible: false
                },
                pageNavigation: {
                    visible: true
                },
                selection: {
                    visible: true
                },
                syncSlicers: {
                    visible: true
                },
                visualizations: {
                    expanded: false
                }
           }
    }
};

For reference: Personalize a report layout

 

Best Regards,
Rico Zhou

 

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

View solution in original post

2 REPLIES 2
v-rzhou-msft
Community Support
Community Support

Hi @asbpowerbi ,

 

Here I suggest you to try adding the "displayOption" property with value "FitToWidth" in customLayout object, as this option will try to fit the report as per the total available size for the page and will introduce a scrollbar for the remaining part if necessary.

Also change "Widescreen" to "Custom" in pageSizeType object.

You can refer to this code.

var embedConfiguration = {
    type: 'report',
    id: '{{txtembedreportid}}',
    embedUrl: '{{txtreportembed}}',
    tokenType: models.TokenType.Embed,
    accessToken: '{{txtaccesstoken}}',
    settings: {
            layoutType: models.LayoutType.Custom,
            customLayout: {
                displayOption: models.DisplayOption.FitToWidth, // Add "FitToWidth"
                pageSize: {
                    type: models.PageSizeType.Custom, // Change to "Custom"
                }
            },
            panes:{
                bookmarks: {
                    visible: false
                },
                fields: {
                    expanded: false
                },
                filters: {
                    expanded: false,
                    visible: false
                },
                pageNavigation: {
                    visible: true
                },
                selection: {
                    visible: true
                },
                syncSlicers: {
                    visible: true
                },
                visualizations: {
                    expanded: false
                }
           }
    }
};

For reference: Personalize a report layout

 

Best Regards,
Rico Zhou

 

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

asbpowerbi
Helper IV
Helper IV

Any thoughts on this?

Helpful resources

Announcements
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

Find out what's new and trending in the Fabric Community.