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...
Need Help
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).