topic Re: Power BI Embedded - Making Report Fill Entire Screen in Developer

Power BI Embedded - Making Report Fill Entire Screen

tylerbauer — Sun, 05 Feb 2017 22:45:01 GMT

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

Re: Power BI Embedded - Making Report Fill Entire Screen

Eric_Zhang — Wed, 08 Feb 2017 08:51:23 GMT

Can you try to change the iframe style to

<iframe style="position:absolute; height:100%; width:100%; border: none">

Re: Power BI Embedded - Making Report Fill Entire Screen

tyeriksen — Mon, 15 Mar 2021 10:12:15 GMT

Thanks for the tip! Still good advice!

Re: Power BI Embedded - Making Report Fill Entire Screen

AndyMcOwl — Thu, 09 May 2024 12:41:26 GMT

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

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