Hi,
I have embedded a dahboard in my webpage in an iFrame. However the dashboard doesnt vertically align to the top of the iFrame. If you zoom the page down to 80% then the dashboard moves to the top of the iFrame, if it is at 100% then the dashboard moves downwards.
Here is the code for the iFrame:
<iframe id="idIframes" frameborder="" src="http://mywebsite.com/mypage.aspx"></iframe>
and here is the container in the aspx file:
<script>
$(document).ready(function () {
var models = window['powerbi-client'].models;
//debugger
var config = {
type: 'report',
tokenType: models.TokenType.Embed,
accessToken: accessToken,
embedUrl: embedUrl,
id: embedReportId,
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;">
<div id="reportContainer" style="height:850px;width:100%;vertical-align: top;position: relative;top: 0;left:0;"></div>
<asp:Label Id ="lblMessage" runat="server" />
</div>
</form>
Helpful resources
Fabric Community Update - July 2025
Find out what's new and trending in the Fabric community.
Power BI Monthly Update - July 2025
Check out the July 2025 Power BI update to learn about new features.
