cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
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
Highlighted
Responsive Resident
Responsive Resident

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.

Highlighted

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?

Highlighted

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).

Highlighted

Ok - that is pretty bad news 😢

 

So the only option is to submit this as a feature request / idea...

Highlighted

Yeah. I had been tempted to raise a support call in the past.

But this is clearly 'by design' and cannot be considered a bug/support issue.

Highlighted

Realize that this border is part of the accessibility (a11y) effort Microsoft has put into the product and enables to option to use screenreaders e.g.

To me a better option is to embrace a11y and include a11y in your own app.

 

Just my 2 cents.

 

-JP

Highlighted

Thanks @jppp - That’s an important point that I hadn't considered.

Perhaps the suggestion/idea shouldn't be about removing the border - instead giving the option to set its colour, so that it can be consistent with the application that is hosting it?

Highlighted

That's a fair point, and a11y efforts are important.

 

But putting a big blue border around something that is supposed to look "embedded", is not ok.

 

Let me quote from the power bi embedded webpage:

 

"Quickly and easily provide customer-facing reports, dashboards, and analytics in your own applications by using and branding Power BI as your own"

 

"as your own" is not really possible, when a giant blue border appears as soon as the user clicks outside an embedded report 🤓

 

Highlighted

Probably the blue is intentionally picked as the best one regarding colorblindness.

Maybe some option to format this could help even if it are fixed colors.

 

-JP

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

Community Conference

Microsoft Power Platform Communities

Check out the Winners!

secondImage

Create an end-to-end data and analytics solution

Learn how Power BI works with the latest Azure data and analytics innovations at the digital event with Microsoft CEO Satya Nadella.

Top Solution Authors