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

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

Reply
smolina74
Frequent Visitor

How to set iframe style for correct mobile tabs visualization

I embedded Power BI reports into my web app. Now I'm having also a mobile view. The problem is that in portrait mode I can see the tabs on the bottom but in landscape mode I see them truncated.

These are the styles I'm using for my iframe:

 

.report-container iframe {
width: 100vw;
height: 90vh; (by the way I tried several different values here)
border: 0;
}

 

This is how it looks in portrait mode: 

Portrait mode

 

and this is how it looks in landscape mode in a nexus 6p:

Landscape mode

 

Anyway in an ipad in landscape mode this works fine, but this should be the case for a smaller device also, I think. 

 

Any idea of whether I should try with different style values? any specific parameter I should pass in the embedded url in order to indicate some sort of Mobile layout?

 

thanks

 

 

 

 

1 REPLY 1
v-sihou-msft
Employee
Employee

@smolina74

 

In your scenario, the tab truncation occurs within iframe itself. It seems to be an issue with REST API when iframe adjust report container with report context in landscape mode on a smaller screen. Currently, there's no parameter in embedded URL which can achieve this "self-adaption". You may try a smaller height value to see if the tab can fully rendered. Please submit an issue on Idea:

 

https://ideas.powerbi.com/forums/360879-issues

 

Regards,

Helpful resources

Announcements
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

Find out what's new and trending in the Fabric Community.

Top Kudoed Authors