Modify Margins or Alignment In Powerbi-client to Embed Power BI in Web Application

[jslade]

We are using Powerbi-Client to embed our power bi reports into our web application.  However, we have a lot of white space between our iFrame and the report and are looking for a way to remove the white space.  Is there a way to adjust the margins or left justify a report within the iFrame in Powerbi-Client?

[v-dineshya]

Hi @jslade ,

Thanks for reaching out to the Microsoft fabric community forum. 

Here are a few approaches to help remove or reduce this white space:

1. Use the layoutType Embed Configuration Option

When embedding the report, make sure to configure the layout properly using layoutType in the embed configuration:

const embedConfig = {
type: 'report',
id: '<report-id>',
embedUrl: '<embed-url>',
accessToken: '<access-token>',
tokenType: models.TokenType.Embed,
settings: {
layoutType: models.LayoutType.Custom,
customLayout: {
displayOption: models.DisplayOption.FitToPage,
pageSize: {
type: models.PageSizeType.Widescreen
}
}
}
};

Try different DisplayOption values:

FitToPage: Fits the whole report page into the iframe.

FitToWidth: Fits the report width, may scroll vertically.

ActualSize: Shows at default size.

Note: The FitToWidth option usually helps eliminate side margins.

2. Remove Default Padding with CSS

Ensure the parent container of your Power BI iframe doesn't have unnecessary padding or margin.

#powerbi-container {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

And in HTML:

<div id="powerbi-container"></div>

3. Use powerbi.embed() Properly

Ensure you are embedding directly into the container with no surrounding wrappers that add space:

const reportContainer = document.getElementById("powerbi-container");
powerbi.embed(reportContainer, embedConfig);

4. Check Power BI Report Canvas Settings

In Power BI Desktop, check your report page size: Go to the Visualizations pane. Select Page Size. Set the type to Custom, and reduce the canvas size to eliminate unneeded space. Also, remove or minimize any background or border margins within the report visuals.

5. Post-load Adjustment via JS

If you're still seeing a white margin and you suspect it's internal, you can try forcing the iframe’s content to zoom:

const iframe = document.querySelector('iframe');
iframe.style.transform = 'scale(1.02)';
iframe.style.transformOrigin = 'top left';

Note: This is not recommended as a primary solution but can help tweak layout visually.

6. Check for Browser Default Styling

Sometimes browsers apply default styling to iframe or container elements. Use developer tools to inspect any inherited margins, paddings, or borders, and reset them if necessary.

Note:Always test changes in different browsers. Make sure to refresh the embedded report after updating layout settings in Power BI Desktop. Keep the powerbi-client package up to date, as newer versions may improve layout handling.

Please refer community threads and articles.

Solved: Re: PowerBI report doesn't fit in the iframe set t... - Microsoft Fabric Community

Solved: Full Screen and Focus Mode options when embedding ... - Microsoft Fabric Community

Configure embedded report settings | Microsoft Learn

Report Layout in Power BI Embedded | Microsoft Learn

Page display settings in a Power BI report - Power BI | Microsoft Learn

If you find this post helpful, please mark it as an "Accept as Solution" and consider giving a KUDOS. Feel free to reach out if you need further assistance.
Thanks and Regards

[v-dineshya]

Hi @jslade ,

If my response has resolved your query, please mark it as the "Accepted Solution" to assist others. Additionally, a "Kudos" would be appreciated if you found my response helpful.

Thank you

[v-dineshya]

Hi @jslade ,

If my response has resolved your query, please mark it as the "Accepted Solution" to assist others. Additionally, a "Kudos" would be appreciated if you found my response helpful.

Thank you

[v-dineshya]

Hi @jslade ,

If my response has resolved your query, please mark it as the "Accepted Solution" to assist others. Additionally, a "Kudos" would be appreciated if you found my response helpful.

Thank you

[jslade]

These options didn't work, but upon further research it looks like our issue is more with the iFrame itself and not with how Power BI is being rendered. 

[Anonymous]

Hi @jslade ,

I think you can try code as below.

Method1: 

 <iframe src="your_report_url" style="width: 100%; height: 100%; border: none; overflow: hidden;" allowfullscreen="true"></iframe>

Method2:

<iframe src="your_report_url" style="width: 2400px; height: 1400px; border: none;"></iframe>

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.

[jslade]

Thank you I will give it a try and let you know how it goes.