Blank space when embedding in web application

[V_Jith]

Hi I have a report with custom canvas size (1440x1920). When embedding the report into an iframe I'm getting Blank white space of the left and right side. Why? I want to exactly fit my report in the iframe without any blank space!

[v-achippa]

Hi @V_Jith,

Thank you for reaching out to Microsoft Fabric Community.

Thank you @Elena_Kalina, @Nasif_Azam and @wardy912 for the prompt response.

As we haven’t heard back from you, we wanted to kindly follow up to check if the solution provided by the user's resolved your issue? or let us know if you need any further assistance.
If any response resolved your issue, please mark it as "Accept as solution" and click "Yes" if you found it helpful.

Thanks and regards,

Anjan Kumar Chippa

[v-achippa]

Hi @V_Jith,

We wanted to kindly follow up to check if the solution provided by the user's resolved your issue.
If any response resolved your issue, please mark it as "Accept as solution" and click "Yes" if you found it helpful.

Thanks and regards,

Anjan Kumar Chippa

[v-achippa]

Hi @V_Jith,

As we haven’t heard back from you, we wanted to kindly follow up to check if the solution provided by the user's resolved your issue.
If any response resolved your issue, please mark it as "Accept as solution" and click "Yes" if you found it helpful.

Thanks and regards,

Anjan Kumar Chippa

[Elena_Kalina]

Hi @V_Jith 

The white space appearing on the sides of your embedded Power BI report is typically caused by one of these common issues:

• Your report canvas is 1440x1920 (3:4 ratio)

• Your iframe container likely has a different aspect ratio

• Solution: Ensure iframe dimensions match your 3:4 aspect ratio

If this post helps, then please consider Accepting as solution to help the other members find it more quickly, don't forget to give a "Kudos" – I’d truly appreciate it! 

Thank you.

[Nasif_Azam · Accepted solution]

Hey @V_Jith ,

To eliminate the white space:

1. Adjust the iframe size:

   <iframe src="your_report_url" width="1440" height="1920" style="border: none;"></iframe>

2. CSS to remove margins or padding:

   iframe {
     margin: 0;
     padding: 0;
     border: none;
   }

3. Fit the report to the iframe:

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

For Detailed Information:
Power BI Embedded: Embedding Power BI content into your app

Embedding Power BI reports using an iframe

Responsive iframe embedding examples

CSS Tricks: Understanding iframe size and layout

If you found this solution helpful, please consider accepting it and giving it a kudos (Like) it’s greatly appreciated and helps others find the solution more easily.

Best Regards,
Nasif Azam

[wardy912]

Hi @V_Jith 

1440x1920 is portrait, your iframe is most likely landscape.

you need to edit the iframe to fit the report

<iframe 
  width="1440" 
  height="1920" 
  src="YOUR_REPORT_URL" 
  frameborder="0" 
  allowFullScreen="true">
</iframe>