Forum Discussion

tylerbauer's avatar
tylerbauer
Helper II
9 years ago

Power BI Embedded - Making Report Fill Entire Screen

Hello, 

 

I am working with a project where I am trying to make the Power BI Report 100% of the screen. Currently, I am hosting the project with Microsoft Azure and importing Power BI Desktop files using Power BI Embedded. I am using the Embed Sample provided my Microsoft to make this happen - https://github.com/Azure-Samples/power-bi-embedded-integrate-report-into-web-app/

 

My problem is that I want to make the Power BI Report Iframe fill 100% of the page. I have limited experience with Visual Studio. Currently, it has other tabs that I do not want included. The first image is the current view of the report. The second image is the desired view of the report. 

 

I am trying to edit the Iframe in visual studio code (last image). What should I do? 

 

Tyler

Need Help

3 Replies

  • Eric_Zhang's avatar
    Eric_Zhang
    Microsoft Employee
    9 years ago

    Can you try to change the iframe style to 

     

    <iframe style="position:absolute; height:100%; width:100%; border: none">
  • AndyMcOwl's avatar
    AndyMcOwl
    New Member
    2 years ago

    So I'm indebted to ChatGPT for this answer!  Here's my HTML:

     

    <div class="Iframe"><iframe allowfullscreen="true" frameborder="0" height="100%" src="https://app.powerbi.com/view?r=eyJrIjoiNzA3OTEwZjMtODI0My00MWU3LWJlMjEtMGU4YjkwMmExNDgxIiwidCI6IjFiOWNlOTk2LWEwY2MtNDc4Yi1iMjM3LWNjNjUyMzFhNjZmYiIsImMiOjh9" title="20th anniverary report" width="100%"></iframe></div>

     

    And here's the relevant CSS:

     

    div.Iframe {

    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio (56.25% = 9/16 * 100) */
    margin: 3rem 5%;

    iframe {
        border: 1px solid $grey;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

     

    You can see this in action here (link goes live later today).