8

When i render the power bi visuals, I notice that there is a grey border on the right and left side of the image. Is there a way to get rid of that? enter image description here

It's awkward that the grey border is not effecting the top or bottom of the iframe.

Thanks, Derek

darewreck
  • 2,576
  • 5
  • 42
  • 67

2 Answers2

10

Try something like this. (extracted from the powerbi-javascript sample). Pass the #reportContainer div as input to powerbi.embed and you should not see the inset borders

    <style>
    #reportContainer {
        width: 100%;
        height: 750px;
        background-color: white;
        padding: 0px;
        clear: both;
    }
    .desktop-view iframe, .mobile-view iframe {
        border: none;
    }
</style>
<h2>Sample PowerBI Embedded Report</h2>
<div class="desktop-view" style="display: block;">
    <div id="reportContainer"></div>
</div>

Result

For Reports, you can do the following to make the background transparent (and also FitToWidth). 

                var embedConfig = {
                    type: type,
                    id: id,
                    embedUrl: embedUrl,
                    viewMode: getViewModeFromModel(viewMode),
                    tokenType: models.TokenType.Aad,
                    accessToken: token,
                    pageView: 'fitToWidth', // applies to Dashboard only; for Report, see below
                    pageName: pageName,

                    // See https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_powerbi_models_dist_models_d_.isettings.html
                    settings: {
                        filterPaneEnabled: true,
                        navContentPaneEnabled: true,
                        background: models.BackgroundType.Transparent,
                        // START Report specific settings
                        layoutType: models.LayoutType.Custom,
                        customLayout: {
                            displayOption: models.DisplayOption.FitToWidth
                        }
                        // END Report specific settings
                    }
                }
Sat Thiru
  • 922
  • 2
  • 10
  • 20
  • I don't believe this resolves the issue. The problem is that the iframe itself contains a background which is grey. All your doing in your code is changing the container of the iframe...but the iframe will still render the content which is a grey background. – darewreck Apr 26 '18 at 21:20
  • https://community.powerbi.com/t5/Developer/Setting-the-iframe-background-for-embedded-reports-default-gray/m-p/353011 – darewreck Apr 26 '18 at 21:20
  • updated my answer with a way to do this for Reports - but it does not work for Dashboards tho. – Sat Thiru Apr 27 '18 at 23:24
  • 1
    Thanks, they actually just released this feature the other week; adding the transparent background – darewreck Apr 30 '18 at 03:24
  • Do you know what version has this? I'm currently using "powerbi-client": "2.5.1", which is the newest version and it still doesn't have it unless i'm doing it wrong. but added the backgroudn – darewreck May 04 '18 at 17:50
  • @darewreck, I am using 2.5.1 as well. You may want to look at your code carefully - or start from a copy/paste of my code. – Sat Thiru May 09 '18 at 17:09
  • Just adding that when using Angular (or any other framework with view encapsulation), make sure to use `::ng-deep` for the styles to work. – DauleDK Mar 06 '20 at 09:06
5

Just add this css code to remove border of generated iframe by powerbi. It worked perfectly for me

<style>
  iframe {  border: none; }
</style>
Prateek Mehta
  • 488
  • 1
  • 8
  • 15