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

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

Reply
duggy
Advocate II
Advocate II

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?

Capture.JPG

 

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>
1 REPLY 1
parry2k
Super User
Super User

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

Helpful resources

Announcements
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

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