Embedding a powerbi MOBILE report when hidden, messes up the rendering (e.g top is cut off) Here is a code sample, that reproduces the issue (slightly modified code from powerbi playground).
<script type="module" src="https://cdn.skypack.dev/@vanillawc/wc-markdown"></script>
<body>
<wc-markdown>
<script type="wc-content">
# Issue
Embedding a powerbi MOBILE report when hidden, messes up the rendering (e.g top is cut off)
example:
Sales & Returns Sample v201912.pbix
https://github.com/microsoft/powerbi-desktop-samples/tree/main/Sample%20Reports
### Steps
1. Get Embed url, Report Id and Access token for a report with MOBILE VIEW.
Working Steps
1. refresh page
1. configure with an embed URL,ReportId and Access Token
1. unhide
1. Load Report
Broken Steps
1. refresh page
1. configure with an embed URL,ReportId and Access Token
1. Load Report (wait for it to load behind the scene)
1. unhide
</script>
</wc-markdown>
<div>
embedUrl:<input type="text" id="embedUrl" >
</div>
<div>
ReportId:<input type="text" id="embedReportId" >
</div>
<div>
Access Token:<input type="text" id="accessToken">
</div>
<button onclick="unhide()">Unhide</button>
<button onclick="embedPowerBIReport()">Load Report</button>
<div id="embedContainer" hidden></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/powerbi-client/2.22.0/powerbi.min.js" integrity="sha512-xm1TmFQjbLPB8QG++BIxUHd5V+mRQ7SBW/kYM7TCYMrmtbFkuvvIPJN5rFNQxn3YcO6OYQlLxMtDurKV+t019w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script >
let loadedResolve, reportLoaded = new Promise((res, rej) => { loadedResolve = res; });
let renderedResolve, reportRendered = new Promise((res, rej) => { renderedResolve = res; });
// Get models. models contains enums that can be used.
models = window['powerbi-client'].models;
// Embed a Power BI report in the given HTML element with the given configurations
// Read more about how to embed a Power BI report in your application here: https://go.microsoft.com/fwlink/?linkid=2153590
function embedPowerBIReport() {
// Read embed application token
// let accessToken = EMBED_ACCESS_TOKEN;
let accessToken = document.getElementById("accessToken").value;
// Read embed URL
// let embedUrl = EMBED_URL;
let embedUrl = document.getElementById("embedUrl").value;
// Read report Id
// let embedReportId = REPORT_ID;
let embedReportId =document.getElementById("embedReportId").value;
// hardcode values here
// accessToken =""
// embedUrl = ""
// embedReportId = ""
// Read embed type from radio
let tokenType = 1;
// We give All permissions to demonstrate switching between View and Edit mode and saving report.
let permissions = models.Permissions.All;
// Create the embed configuration object for the report
// For more information see https://go.microsoft.com/fwlink/?linkid=2153590
let config = {
type: 'report',
tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,
accessToken: accessToken,
embedUrl: embedUrl,
id: embedReportId,
permissions: permissions,
settings: {
layoutType:2,
panes: {
filters: {
visible: true
},
pageNavigation: {
visible: true
}
}
}
};
// Get a reference to the embedded report HTML element
let embedContainer = $('#embedContainer')[0];
// Embed the report and display it within the div container.
report = powerbi.embed(embedContainer, config);
// report.off removes all event handlers for a specific event
report.off("loaded");
// report.on will add an event handler
report.on("loaded", function () {
loadedResolve();
report.off("loaded");
});
// report.off removes all event handlers for a specific event
report.off("error");
report.on("error", function (event) {
console.log(event.detail);
});
// report.off removes all event handlers for a specific event
report.off("rendered");
// report.on will add an event handler
report.on("rendered", function () {
renderedResolve();
report.off("rendered");
});
}
unhide = () => {
let embed = document.getElementById("embedContainer");
embed.removeAttribute("hidden")
}
</script>
on:
New Button Slicer: Issue with the Grid type of Arr...
mattlee
on:
List Slicer Button Dimensions Ignored in Service
on:
BUG: report connected to deleted semantic model ca...
on:
Deployment pipelines don't support M365 groups
Hongju_Jung
on:
A Typo about Measure tools (Korean)