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

Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.

Reply
nicksav
Helper II
Helper II

Power BI Embedded - responsive dashboard view

Guys, I am playing around with Power BI Embedded Dashboards, and one thing I have found that Dashboard actually has a switch to turn into mobile friednly view:

 

Check this:

image.png

 

This happens if the size of the Iframe less than 320px!!!

Can anybody from MSFT help on how to make it responsive not only for devices with width less than 320px?

 

Thanks

Nick

 

1 ACCEPTED SOLUTION
Eric_Zhang
Employee
Employee


@nicksav wrote:

Guys, I am playing around with Power BI Embedded Dashboards, and one thing I have found that Dashboard actually has a switch to turn into mobile friednly view:

 

Check this:

image.png

 

This happens if the size of the Iframe less than 320px!!!

Can anybody from MSFT help on how to make it responsive not only for devices with width less than 320px?

 

Thanks

Nick

 


@nicksav

AFAIK, Embedded Power BI dashboards won't auto fit the resolution to have a mobile friendly layout. As a workaround, in Javascript code, you can detect the screen resolution and then determine whether embedding in "fitToWidth" or "oneColumn".

    var config = {
        type: 'dashboard',
        tokenType: models.TokenType.Embed,
        accessToken: accessToken,
        embedUrl: embedUrl,
		//pageView: "fitToWidth",
		pageView: "oneColumn",
        id: embedDashboardId
    };

OneColumn(left) VS fitToWidth(right).

Capture.PNG

 

View solution in original post

2 REPLIES 2
Eric_Zhang
Employee
Employee


@nicksav wrote:

Guys, I am playing around with Power BI Embedded Dashboards, and one thing I have found that Dashboard actually has a switch to turn into mobile friednly view:

 

Check this:

image.png

 

This happens if the size of the Iframe less than 320px!!!

Can anybody from MSFT help on how to make it responsive not only for devices with width less than 320px?

 

Thanks

Nick

 


@nicksav

AFAIK, Embedded Power BI dashboards won't auto fit the resolution to have a mobile friendly layout. As a workaround, in Javascript code, you can detect the screen resolution and then determine whether embedding in "fitToWidth" or "oneColumn".

    var config = {
        type: 'dashboard',
        tokenType: models.TokenType.Embed,
        accessToken: accessToken,
        embedUrl: embedUrl,
		//pageView: "fitToWidth",
		pageView: "oneColumn",
        id: embedDashboardId
    };

OneColumn(left) VS fitToWidth(right).

Capture.PNG

 

hello @Eric_Zhang 

 

A question,

If OneColumn is determined by small screen resolution, who determines the position of the graphics? Does it do it automatically or do you have to design something in advance?

Helpful resources

Announcements
Microsoft Fabric Learn Together

Microsoft Fabric Learn Together

Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City

PBI_APRIL_CAROUSEL1

Power BI Monthly Update - April 2024

Check out the April 2024 Power BI update to learn about new features.

April Fabric Community Update

Fabric Community Update - April 2024

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