cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
ysapiyev
Responsive Resident
Responsive Resident

Borders of report

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:

get.png 

 

How they can be removed?

 

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

Regards,

Yerkhan

1 ACCEPTED SOLUTION

@v-jiascu-msft

 

Hi,

 

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

 

Regards,

Yerkhan

View solution in original post

7 REPLIES 7
Hellidana
New Member

Hi,

fixed that using next style

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

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

v-jiascu-msft
Microsoft
Microsoft

Hi Yerkhan,

 

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

Borders-of-report

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

Community Support Team _ Dale
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

@v-jiascu-msft

 

Hi,

 

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

 

Regards,

Yerkhan

View solution in original post

Where did you add this to the js file?

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

Thanks for sharing, @ysapiyev.

 

 

Best Regards,
Dale

Community Support Team _ Dale
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Helpful resources

Announcements
PBI User Groups

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group!

MBAS on Demand

Microsoft Business Applications Summit sessions

On-demand access to all the great content presented by the product teams and community members! #MSBizAppsSummit #CommunityRocks

Get Ready for Power BI Dev Camp

Power BI Dev Camp - June 24th

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

Top Kudoed Authors