Forum Discussion

V_Jith's avatar
V_Jith
Frequent Visitor
1 year ago
Solved

Blank space when embedding in web application

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!

 

 

Need Help
Show and Tell
Tips and Tricks

6 Replies

  • wardy912's avatar
    wardy912
    Super User
    1 year ago

    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>
  • Nasif_Azam's avatar
    Nasif_Azam
    Super User
    1 year ago

    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

  • Elena_Kalina's avatar
    Elena_Kalina
    Solution Sage
    1 year ago

    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.

  • v-achippa's avatar
    v-achippa
    Community Support
    1 year ago

    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's avatar
      v-achippa
      Community Support
      1 year ago

      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's avatar
        v-achippa
        Community Support
        1 year ago

        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