Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Grow your Fabric skills and prepare for the DP-600 certification exam by completing the latest Microsoft Fabric challenge.

Reply
controllingARS
Regular Visitor

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

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
 

@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

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
 

Helpful resources

Announcements
Europe Fabric Conference

Europe’s largest Microsoft Fabric Community Conference

Join the community in Stockholm for expert Microsoft Fabric learning including a very exciting keynote from Arun Ulag, Corporate Vice President, Azure Data.

RTI Forums Carousel3

New forum boards available in Real-Time Intelligence.

Ask questions in Eventhouse and KQL, Eventstream, and Reflex.