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

Join us for an expert-led overview of the tools and concepts you'll need to become a Certified Power BI Data Analyst and pass exam PL-300. Register now.

Reply
cdubbs
Frequent Visitor

Embed API: Fit to Width leaving empty space in custom layout

I am designing a custom layout for mobile users for my report using the Power BI Embed API.

 

One of the puzzling issues I am encountering is the arise of blank space inside the right and bottom edges of my the iframe when using the "Fit to Width" display option.

 

I have created a simple test report consisting of a single blue rectangle to demonstrate my problem.

 

Here is a screenshot of the desktop report:

Power BI Debug Report.PNG

 

 

Now, here is a screenshot of the embedded report using the "Fit to Width" display option:

Power BI Debug Embedded Report.PNG

 

As you can see, there is extra space added between the right and bottom sides of the actual report and the edge of the iframe. Increasing/Decreasing the "pageSize" dimensions do not cover this gap.

 

Here is my config:

 

 

let reportLoadConfig = {
    type: "report",
    tokenType: models.TokenType.Embed,
    accessToken: embedData.accessToken,
    embedUrl: embedData.embedUrl[0].embedUrl,
    settings: {
        filterPaneEnabled: false,
        navContentPaneEnabled: false,
        layoutType: 1,  // 0 - Master, 1 - Custom, 2 - MobilePortrait, 3 - MobileLandscape
        background: models.BackgroundType.Transparent,
        customLayout: {
            pageSize: {
                type: models.PageSizeType.Custom,
                width: 400,
                height: 1400
            },
            displayOption: 1, // 1 - fit to width, 2 - Actual Size, 0 - FitToPage
            pagesLayout: {
                "ReportSection": {
                    defualtLayout: {
                        displayState: {
                            mode: 1
                        }
                    },
                    visualsLayout: {
                        "7fcbe3ebae04093b2d65": {
                            x: 0,
                            y: 0,
                            height: 1400,
                            width: 400,
                            displayState: {
                                mode: models.VisualContainerDisplayMode.Visible
                            }
                        }
                    }
                }
            }
        }
    }
};

 

 

The dimensions of the container I am embedding in:

 

#report-container{
    height: 700px;
    width: 400px;
}

 

 

I have set my pageSize height and the viusal height in my config to be double that of my container to represent scrolling behavior, as that is relevant to the custom layout for the mobile report I am creating.

 

Does anybody know why this happens, or if there is a way to prevent this blank space from appearing?

 

An alternative approach I have tried is using the "actual size" display option and using additional scripting to dynamically maintain the size of my visuals. This method isn't ideal for me, as I'd like to try and minimize the amount of scripting needed when delivering to my client. Ideally, I'd like to use the "Fit to width" display option, but it's causing me issues with what I have just shown.

 

Any insight as to how I can prevent this behavior while using the "Fit to width" display option for my custom layout would be greatly appreciated.

0 REPLIES 0

Helpful resources

Announcements
Join our Fabric User Panel

Join our Fabric User Panel

This is your chance to engage directly with the engineering team behind Fabric and Power BI. Share your experiences and shape the future.

June 2025 Power BI Update Carousel

Power BI Monthly Update - June 2025

Check out the June 2025 Power BI update to learn about new features.

June 2025 community update carousel

Fabric Community Update - June 2025

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