Forum Discussion

duggy's avatar
duggy
Advocate II
7 years ago

Embedded dashboard not adjusting to screen size/mobile

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/[email protected]"></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>
Need Help

1 Reply