Report Embed in Phone Layout shows only middle part

[nitin_sp]

Hi,

I am trying to use the mobile embed layout as explained here;

https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-For-Mobile

Here is my config settings looks like for embed;

"{"tokenType":0,"accessToken":"<TOKEN>","permissions":7,"id":"211ff41e-e652-473a-9586-92d1f126ad99","embedUrl":"https://app.powerbi.com/reportEmbed?reportId=211ff41e-e652-473a-9586-92d1f126ad99","type":"report","pageName":"ReportSection","pageView":"oneColumn","settings":{"filterPaneEnabled":false,"navContentPaneEnabled":false,"layoutType":2}}"

The height and width of the embed div is: width: 724px; height: 407.25px;

I tried to change the height and width but that didnt matter much.

Here is a screenshot of the power BI desktop in Phone Layout:

Power BI Phone Layout

And here is how it looks in page after embed with MobilePortraitLayout:

After embed

Just want to understand whats wrong am I doing. I tried to play with the height / width to ensure thats not something wrong I am doing but that didn't help. 

Any help will be appreciated!

[v-micsh-msft]

The Layout have two values for the Mobile, make sure you configured it as MobilePortrait.

Code example:

var embedConfiguration = {
	type: 'report',
	id: '5dac7a4a-4452-46b3-99f6-a25915e0fe55',
	embedUrl: 'https://app.powerbi.com/reportEmbed',
	tokenType: models.TokenType.Embed,
	accessToken: 'h4...rf',
	settings: {
            layoutType: models.LayoutType.MobilePortrait
        }
};

Regards,

Michael

[nitin_sp]

Hi Michael,

Yes i do change the layout using following code;

	if (util.is.mobilePortrait()) {
				if (data.hasMobilePortraitLayout) {
					config.settings.layoutType = models.LayoutType.MobilePortrait;
					config.pageView = "oneColumn";
				}
			}

That code also executes before 

powerbi.embed(reportContainer, config);

I also thought pageView might help but it doesnt. So I tried with and without page view but no luck.

Seems some bug with embed API?