topic Re: Modify Margins or Alignment In Powerbi-client to Embed Power BI in Web Application in Developer

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

jslade — Thu, 13 Mar 2025 18:19:11 GMT

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?

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

Anonymous — Tue, 25 Mar 2025 01:55:21 GMT

Hi @jslade ,

I think you can try code as below.

Method1:

Method2:

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.

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

jslade — Tue, 25 Mar 2025 19:13:26 GMT

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

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

jslade — Fri, 04 Apr 2025 15:33:55 GMT

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.

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

v-dineshya — Tue, 13 May 2025 09:04:50 GMT

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:

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

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

v-dineshya — Fri, 16 May 2025 15:36:23 GMT

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

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

v-dineshya — Mon, 19 May 2025 15:40:32 GMT

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

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

v-dineshya — Thu, 22 May 2025 15:38:27 GMT

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