You’re offline. This is a read only version of the page.
Hi All
We have a portal page that contains an embedded power bi report (using the power bi component). When the report is displayed there is a border on the left and top of the report. How can this be removed?
I've looked at this further. In the browser using the developer tool (f12) I can see the iframe which contains the report. I can edit the iframe tag and manipulate the border. So I've tried using javascript (in the advanced section of the page in portal management) to do the same but no joy. I'm using getElementsByTagName but it doesn't see the iframe. Is this to do with how the page is being built, is there an event that needs to fire before I can access the iframe element?
Thanks
Hi @paulsnolan ,
Apologize for the delay in response. I completely missed it. If you are after only changing the iFrame border. then below is the solution.
In portal studio:
1. Themes > Upload "Custom.css" file
2. And paste in the below css
Share
Report
All responses (
Answers (iframe {
border-width: 10px !important;
border-style: inset !important;
border-color: #f4f4f5 !important;
border-image: initial;
}3. Press the sync configuration and browse the website.
Note: !Important is a must.
Note 1: Change the CSS according to your need.
Output:
Hope it helps.
------------
If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.
Hi ragavanrajan
This is my Custom Javascript code.
alert("In Advanced> Custom Javascript");
$(window).load(function() {
// get div container for powerbi report
var embedContainer = $(".powerbi")[0];
// get reference to the embedded report
var report = powerbi.get(embedContainer);
// register a function to execute when report will finish loading
report.on("loaded", function(){
// update existing setting of the reports
// you can disable only one page or both at the same time
report.updateSettings({
panes: {
filters :{
visible: false
},
}
}).catch(function (errors) {
console.log(errors);
});
styleIframe()
})
});
function styleIframe() {
var embedContainer = $(".powerbi")[0];
var report = powerbi.get(embedContainer);
/*alert("Report loading ...");*/
report.on("rendered", function() {
/*alert("Report loaded so try and manipulate the embedded report");*/
var iframeElements = document.getElementsByTagName("iframe");
iframeElements[0].style.borderColor = "#f4f4f5";
iframeElements[0].style.borderStyle = "solid";
iframeElements[0].style.borderRadius = "10px";
iframeElements[0].style.borderWidth = "10px";
});
}
Hi ragavanrajan
Thanks for the reply. That worked, almost. I've got working code and I've placed it in the Custom Javascript section of the Advanced tab of the Web Page which has the power bi-component. I say it almost works because sometimes it works and sometimes it doesn't. I've put alerts in the code and some at the start and end of the code. From this, I can see when the Custome Javascript is being executed. When the code doesn't work it is when the Custom Javascript isn't being executed like there is some caching of the page somewhere. From my alerts, I can see when the events are being fired and that is when the code works i.e. it is executed. Any ideas?
Bit more information. I’m styling the Iframe. Is there another way using report.updateSettings?
Hi @paulsnolan
There is a recent article from @OOlashyn to customize Power BI embedded frame. Link for your reference
https://www.dancingwithcrm.com/customizing-embedded-powerbi-in-powerapps-portal/
This should solve your problem. If you have no joy please let us know.
Hope it helps.
------------
If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.
#1
Lucas001
60
Super User 2025 Season 1
#2
Fubar
55
Super User 2025 Season 1
#3
surya narayanan
35
