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

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