Forum Discussion

nicksav's avatar
nicksav
Helper II
8 years ago
Solved

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:

 

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 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:

     

    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).

     

2 Replies

  • Eric_Zhang's avatar
    Eric_Zhang
    Microsoft 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:

     

    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).

     

    • apenaranda's avatar
      apenaranda
      Post Partisan

      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?