How to remove blue outline from embedded report?

[alexbjorlig]

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 🤔

[MattCalderwood]

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.

[alexbjorlig]

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?

[MattCalderwood]

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

[alexbjorlig]

Ok - that is pretty bad news 😢

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

[MattCalderwood]

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.

[jppp]

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

[alexbjorlig]

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 🤓

[lawrenceabith]

Hi @alexbjorlig

Can you solve this problem? I have the same issue. When I click on my dashboard on my app with Power BI Embedded, that appeals a blue box around my frame. I have trying so many things changing the CSS, changing the power bi theme and nothing. I don't believe Microsoft can solve this because we pay a lot of money to have a capacity in power bi premium. 

If you have any clue, please tell me.

Many thanks,

Lawrence

[jppp]

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

[MattCalderwood]

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?