Embedded dashboard not adjusting to screen size/mo...

duggy · ‎10-14-2018

Hi,

I have created my PowerBi reports, I have created the mobile view on PowerBi desktop, I have then embedded the report in an iFrame on my website (with the reportId, GroupId etc.).

The report displays fine when viewing in a webpage. However if you resize the webpage, the report does not change its view to adjust to the screen, rather it zooms out and remains a rectangular report (jsut very very small).

If I just load the iFrame code into the browser and change the screen size, same issue.

I I load the report url from a mobile device, it also displays the same issues (see image).

If I load the report in app,powerbi and click mobile view it aligns correctly.

I have tried to read up on articles on how to correct but cant seen to find a solution. Can anyone assist?

The above image is an example of how the report displays on a mobile device. Am I setting some wrng parameters in the aspx code for the container or something?

<%@ Page Language="C#" AutoEventWireup="true" Async="true" CodeFile="mypage.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<META name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<META name="description" content="Syenap">
<META name="author" content="Syenap">
    
    <script src="https://npmcdn.com/es6-promise@3.2.1"></script>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/powerbi.js"></script>

    <style>
    #reportContainer {
        width: 100%;
        height: 650px;
        background-color: white;
        padding: 0px;
        clear: both;
    }
    .desktop-view iframe, .mobile-view iframe {
        border: none;
    }
</style>    
    <script> 
        $(document).ready(function () {   
            var accessToken = document.getElementById("<%= hdnAccessToken.ClientID %>").value;
            var embedUrl = document.getElementById("<%= hdnEmbedUrl.ClientID %>").value;
            var embedReportId = document.getElementById("<%= hdnEmbedReportId.ClientID %>").value;
             var sectionName = document.getElementById("<%= hdnSectionName.ClientID %>").value;
            var models = window['powerbi-client'].models;
            //debugger
            var config = {
                type: 'report',
                tokenType: models.TokenType.Embed,
                accessToken: accessToken,
                embedUrl: embedUrl,
                id: embedReportId,
				//pageView: "oneColumn",
                permissions: models.Permissions.All,
                settings: {
                    filterPaneEnabled: false,
                    navContentPaneEnabled: false,
                    localeSettings: {
                        language: "en-GB",
                        formatLocale: "en-GB"
                    }
                }//,
                //pageName: sectionName
            };
           
            var reportContainer = $('#reportContainer')[0];
            var report = powerbi.embed(reportContainer, config);    

        });
        

    </script>

</head>
<body style="vertical-align: top;position: relative;top: 0;">
    <form id="form1" runat="server" style="vertical-align: top;position: relative;top: 0;">
    <div style="vertical-align: top;">
        <asp:HiddenField ID="hdnAccessToken" runat="server"></asp:HiddenField>
        <asp:HiddenField ID="hdnEmbedUrl" runat="server"></asp:HiddenField>
        <asp:HiddenField ID="hdnEmbedReportId" runat="server"></asp:HiddenField>
        <asp:HiddenField ID="hdnSectionName" runat="server"></asp:HiddenField>
        <div id="reportContainer" style="height:650px;width:100%;vertical-align: top;position: relative;top: 0;left:0;"></div>
        <asp:Label Id ="lblMessage" runat="server" />
    </div>
    </form>
</body>
</html>

duggy · ‎10-15-2018

Anyone have an answer for this? The internet is surprisingly limited in information...

leemoran · ‎12-31-2018

Hi Duggy,

I realise this is from a little while back but in order to get your embedded content to use the mobile view you will need to do some magic in your web app to detect the size of the page/frame and when it gets under a certain wide switch your javascript call to render the report using the mobile view instead of the standard landscape one.

You can also get more specific and define a custom layout to apply - it's more complex but allows fine-grained control over the elements that are shown and where they are placed.

There is an article here that has some links off to relevant articles that might help:

https://azure.microsoft.com/en-us/updates/mobile-layout-support/

Hope you get it (or have already got it) sorted!

Embedded dashboard not adjusting to screen size/mobile

Helpful resources

Microsoft Fabric Learn Together

Power BI Monthly Update - April 2024

Fabric Community Update - April 2024