Forum Discussion
How to remove blue outline from embedded report?
My objective is to hide the blue box-shadow outline, power bi embedded adds when clicking on embedded content:
Using the chrome dev tools, I have found what I believe is the relevant DOM element and CSS selectors:
So the blue border is actually a combination of box-shadow and outline.
Removing these CSS properties in chrome dev tools gets the job done, and removes the blue border.
Our parent application is Angular 9. When adding the following css however, it does not work:
::ng-deep .displayArea .disableAnimations .fitToWidthCentered {
outline: none !important;
box-shadow: none !important;
}
I hope you can help me out here 🤔
10 Replies
Hi alexbjorlig
As far as I know, there is no way to disable this behaviour.CSS in your own application will have no effect on the content of the embedded iFrame used by the report.
I would really like to be proved wrong on this one though, as it has bugged me for months now.
Maybe we should raise a new 'idea' and try to get enough people to vote for it to make it happen.Ok - according to this SO answer, you are correct about the CSS affecting the iframe.
What about the javascript powerbi-client - is it open source?
Then I could maybe draft a pull request to add this feature?
The JavaScript Power BI client source code is a simple/thin API layer that allows applications to communicate with the underlying Power BI content.
Most of the visual content is delivered through closed-source API requests, so I don't think that the markup/css changes required could be done within the JavaScript client code (unfortunately).
