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>

parry2k · ‎10-14-2018

@duggy it will make sense to post this queston in "Developer" forum. Here is the link

Subscribe to the @PowerBIHowTo YT channel for an upcoming video on List and Record functions in Power Query!!

Learn Power BI and Fabric - subscribe to our YT channel - Click here: @PowerBIHowTo

If my solution proved useful, I'd be delighted to receive Kudos. When you put effort into asking a question, it's equally thoughtful to acknowledge and give Kudos to the individual who helped you solve the problem. It's a small gesture that shows appreciation and encouragement! ❤

Did I answer your question? Mark my post as a solution. Proud to be a Super User! Appreciate your Kudos 🙂
Feel free to email me with any of your BI needs.

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