Forum Discussion

asbpowerbi's avatar
asbpowerbi
Helper IV
3 years ago
Solved

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:

 

 

Thanks for your help!

 

Cheers!

 

Peter

Need Help
  • Anonymous's avatar
    Anonymous
    3 years ago

    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.

2 Replies

  • Anonymous's avatar
    Anonymous
    Not applicable
    3 years ago

    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.