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!

[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]

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>