Reply
controllingARS
Regular Visitor
Partially syndicated - Outbound

Power BI Iframe settings for a container web and mobile (responsive)

Hello community,

 

can you please help us with our problem to change /model  the iframe into a responsive version or something like this.

First off all we are no professionals in case of html coding ;D

 

We want our public iframe to be in a container in our workforce platform  (core smartwork) on the dashboard.

We have tried this so far:

 

<div style="width:415px; height:220px; overflow: hidden">

<center>

<iframe width="380" height="260", src="iframe…" frameborder="0" allowFullScreen="true" ></iframe>

</center>

</div>

 

Output is this one :container in normal webbrowser size

controllingARS_0-1634027883807.png

 

Looks pretty good but is there a simple way to change or resize the width, so on mobile or changing webbrowser window will change/resize the iframe?

output container when the browser is changing its size

controllingARS_1-1634027902800.png

 

Thank you so much.

 

Kind regards Andreas

3 REPLIES 3
selimovd
Super User
Super User

Syndicated - Outbound

Hey @controllingARS ,

 

you have to adjust that with the CSS for the iFrame. I think the following options should work:

style='position: fixed; width:100%; height:100%'

 

So the iFrame would look like this:

<div style="width:415px; height:220px; overflow: hidden">

<center>

<iframe width="380" height="260", src="iframe…" frameborder="0" allowFullScreen="true" style='position: fixed; width:100%; height:100%'></iframe>

</center>

</div>

 

If you need any help please let me know.
If I answered your question I would be happy if you could mark my post as a solution ✔️ and give it a thumbs up 👍
 
Best regards
Denis
 

Syndicated - Outbound

@selimovd

Thank you Denis, for you quick reply.

Unfortunatly now the iframe is on the right bottom.

The iframe should go into the empty middle container.

controllingARS_0-1634037761545.png

Thank you.

Kind regards

Andreas

Syndicated - Outbound

Hey @controllingARS ,

 

then you still have to position it with CSS.

If you share the link I can help you, otherwise you have to try until it fits or to calculate the position based on your canvas size.

 

If you need any help please let me know.
If I answered your question I would be happy if you could mark my post as a solution ✔️ and give it a thumbs up 👍
 
Best regards
Denis
 
avatar user

Helpful resources

Announcements
Las Vegas 2025

Join us at the Microsoft Fabric Community Conference

March 31 - April 2, 2025, in Las Vegas, Nevada. Use code MSCUST for a $150 discount!

Jan25PBI_Carousel

Power BI Monthly Update - January 2025

Check out the January 2025 Power BI update to learn about new features in Reporting, Modeling, and Data Connectivity.

December 2024

A Year in Review - December 2024

Find out what content was popular in the Fabric community during 2024.

Top Solution Authors (Last Month)
Top Kudoed Authors (Last Month)