cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Advocate I
Advocate I

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:

 

Screenshot 2020-04-21 at 20.53.16.png

 

 

Using the chrome dev tools, I have found what I believe is the relevant DOM element and CSS selectors:

 

Screenshot 2020-04-21 at 20.39.47.png

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 10

Helpful resources

Announcements
secondImage

Happy New Year from Power BI

This is a must watch for a message from Power BI!

December Update

Check it Out!

Click here to read more about the December 2020 Updates!

Community Blog

Check it Out!

Click here to read the latest blog and learn more about contributing to the Power BI blog!

Get Ready for Power BI Dev Camp

Get Ready for Power BI Dev Camp

Mark your calendars and join us for our next Power BI Dev Camp!.