Borders of report

[ysapiyev]

Hi everyone

I embedded Power BI report in web application and got borders of report. I set background transparency of report in Power BI Desktop to 100% and set embedding settings:

settings: { background: models.BackgroundType.Transparent }

However, I still got these lines:

 

How they can be removed?

update: If I use Firefox browser, I get black borders. White borders I get in Google Chrome.

Regards,

Yerkhan

[Hellidana]

Hi,

fixed that using next style

:host ::ng-deep iframe {
  border: none;
}

[coolsoftware]

Thanks! This works perfectly, and it is the only workable solution I found for ngx-powerbi.

[v-jiascu-msft]

Hi Yerkhan,

Which part do you mean? Is the one in the rectangle in the snapshot below?

If so, the https://microsoft.github.io/PowerBI-JavaScript/demo/v2-demo/index.html could give you some ideas. I will get back to you if I find the key parts.

Best Regards,
Dale

[ysapiyev · Accepted solution]

@v-jiascu-msft

Hi,

Was able to solve this issue adding border-style:none to power-bi.js file.

Regards,

Yerkhan

[alexbjorlig]

Where did you add this to the js file?

[csjames010]

@alexbjorlig 

powerbi-client/dist/powerbi.js

Line 838 (or so) add iframeContent.style.border = 'none';

Here it is added in context: 

 Embed.prototype.setIframe = function (isLoad, phasedRender) {
	        var _this = this;
	        if (!this.iframe) {
	            var iframeContent = document.createElement("iframe");
	            var embedUrl = this.config.uniqueId ? utils.addParamToUrl(this.config.embedUrl, 'uid', this.config.uniqueId) : this.config.embedUrl;
	            iframeContent.style.width = '100%';
				iframeContent.style.height = '100%';
				iframeContent.style.border = 'none';

I've been irritated with that border for weeks. Finally came across this which led me down the right path to find it. 

[v-jiascu-msft]

Thanks for sharing, @ysapiyev.

Best Regards,
Dale