How to set iframe style for correct mobile tabs visualization

[smolina74]

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

[v-sihou-msft]

@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,