topic Re: Scroll bar will not appear in embedded report in Developer

Scroll bar will not appear in embedded report

asbpowerbi — Wed, 15 Mar 2023 17:11:47 GMT

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:

Thanks for your help!

Cheers!

Peter

Re: Scroll bar will not appear in embedded report

asbpowerbi — Fri, 17 Mar 2023 12:30:05 GMT

Any thoughts on this?

Re: Scroll bar will not appear in embedded report

Anonymous — Tue, 21 Mar 2023 07:16:42 GMT

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.