Forum Discussion
Setting the iframe background for embedded reports (default gray color is terrible)
We're embedding PowerBI reports in a custom application we're building. For the most part, this is working great. However, we can't figure out how to set the background color of the iframe in which reports are getting embedded. Note: we're not talking about the background color of the report. Instead, we're talking about the padding between the borders of the iframe and the report content. See attached image. From what we can tell, there's no way to set this from Desktop or from the embed calls we're making.
Ideally, we'd be able to reference an external CSS or something that would be used within the iframe of the report but that doesn't appear to be an option (and obviously, we can't control the styling of elements within the iframe from our application).
24 Replies
We are working on a solution for this now, so you will be able to use it pretty soon.
In general, we will enable you to optimize the size of the report page to fit into the iframe,
without any grey padding.
In addition, you will be able to get the report size, and so you will be able to optimize the DIV size and match it with the report size.
Ok, thanks for the info Nimrod.
One thing that might be really nice - allow us, in the embed call, to pass in a URL to a CSS resource that's external to PowerBI. Then, when the report renders in the iFrame, it includes that CSS. This way, we're in control of the CSS and can change up the report styling any way we choose.
tmcdevitt wrote:
Ok, thanks for the info Nimrod.
One thing that might be really nice - allow us, in the embed call, to pass in a URL to a CSS resource that's external to PowerBI. Then, when the report renders in the iFrame, it includes that CSS. This way, we're in control of the CSS and can change up the report styling any way we choose.
I guess you may have intrest in
Transparent background is now available and you only have to add this :
config.settings.background = models.BackgroundType.Transparent;
I tested this feature and I find a bad behavior.
When making the background transparent, If a visual in the report is maximized with "Focus Mode" the whole dashboard remains on the background behind the maximized visual.
This seems a bug.
Hi Nimrod,
Thanks for the update. The sooner this is available, plus the resizing support you mentioned, the better!
Just a question - where will the availability of this feature be communicated? Via this forum (which I don't monitor frequently) or via the Power BI blog (which I do monitor daily!).
We are updating on all our new feature in our developers monthly blog posts.
Be sure to check there, that should get you covered.
Hey guys,
Any update on this issue? Someone had mentioned this might be fixed "soon". Really hoping that's for the January release. We're trying to launch some of our embedded reports to actual users in early February and this gray background issue makes things look less professional than we'd like.
Thanks.
- Terence
See January blog post- https://powerbi.microsoft.com/en-us/blog/power-bi-developer-community-january-update/
Look for 'Custom layout' feature.
I am not seeing anything about changing bg color only the page size, or controlling visual sizes, position and visibility ;(......
Hi, is there any update on this please? The January release blog post points me to the demo > custom layout. I've looked through this but can only see that it regulates x and y position, plus visibility. I can't see how to remove the gray shading. Can anyone advise if this is possible yet?
The gray shading seems driven by the ratio (height/width) of the visual. At some ratios, the gray is top/bottom, but at some point the gray moves left/right. The size of the embedded visual appears to be standard, and not driven by the originating report.
It would therefore be very useful to have the default size or ratio of Power BI standard visuals. Is this available anywhere?
Hi,
We are working on an additional solution to go out at the beginning of May,
and will allow to set the iFrame background as 'transparent', giving him the color defined on the DIV element.
That will give developers total control on the color of themargins, in addition to the optimization you can do to the size of the object using the 'Custom Layout' API.
Is there any update? I have been waiting out for this feature for a while.
I am also waiting for this, updates?
I am not sure when this was released, but it's documented now:
https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details#settings
See "Transparent Background"
Gentlemen, could someone please confirm that this is fixed on the PowerBI Embedded report?
Is this the correct code:
config.settings.background = models.BackgroundType.Transparent;
Thanks
Tom
Use the Wallpaper setting section in the Format Pane and set the wallpaper color to black or #000000 or the color you wish. That would be the color of the iframe.
