Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Get certified in Microsoft Fabric—for free! For a limited time, the Microsoft Fabric Community team will be offering free DP-600 exam vouchers. Prepare now

Reply
hectordanielc
Advocate I
Advocate I

Title and Axis Problem with PBI Embedded Reports

Hi, I'm embedding some reports in a Next app. Until today everything was ok, but now there seems to be a problem with some visuals titles. It come and goes without changing anything in the configuration. 

Here a bad one:

hectordanielc_1-1727045646946.png

Here a good one:

hectordanielc_2-1727045681467.png

 

It's like the visuals are not recognizing the titles and just overalipping them.


Some others have x axis problem:

hectordanielc_0-1727047360788.png


Also, all of them have the exact same format configuration

1 ACCEPTED SOLUTION

After seeing that the reports rendered correctly when placed as the only element on a page, I conducted further testing with my application and realized that the report worked fine when rendered in a div that did not have any "hidden" tag above it (I am using Tailwind CSS). This tag is equivalent to "display:none" in CSS.

 

In the following link provided by Microsoft support: Best Practices for Embedded Power BI Performance, it is mentioned in the "Bootstrapping the Iframe" section that, for now, "display:none" should be avoided as it can lead to erroneous results.

 

As a workaround, I restructured my application to avoid using display:none, and now everything is working fine again.

 

It's worth mentioning that my app had been functioning properly for months until the weekend of 9/20. However, seeing that this issue is already documented in the article mentioned, it seems that the problem with this tag has been around for some time.

View solution in original post

10 REPLIES 10
manaray
New Member

We recently started experiencing the same rendering issues with embedded reports as described here

 

Slicer dropdowns are overlapping their title fields:

Correct:

manaray_1-1727458637210.png

Incorrect:

manaray_0-1727458622359.png

 

Overlapping text on xaxis:

Correct:

manaray_3-1727458675028.png

Incorrect:

manaray_2-1727458663969.png

 

Additionally, the timing descibed here matches ours - everything was looking good this past Saturday (9/21) and starting appearing incorrectly on Sunday (9/22). I am confirming, but I believe the version of Power BI Desktop that was used to publish the reports was also update this past Sunday

 

We are not seeing the issue come and go, however, we are seeing it on some browsers and not others. It seems to always look correct in Firefox. In Chrome, sometimes it will render correctly, but sometimes it won't. Only the embedded reports show this issue; Power BI desktop, etc all look correct

 

We tried the steps outlined in one of the answers here (clearing browser cache, latest versions and removing CSS) and it did not help. Note that we are not using Next.js

 

Today I've been told that the Power BI team is aware of the issue and is already working on it. By the moment I'm just waiting and refreshing my app.

Have there been any updates on this, and/or is there a separate ticket/issue somewhere that we could track outside of this forum posting?

Hi @manaray,

 

I went back to troubleshoot the issue on my own to see if I could find a workaround. It turns out that the problem lies in the CSS, specifically within styles being applied directly inside the iframe. Below is a screenshot of the title's div; as you can see, it's setting a height of 0px.

hectordanielc_0-1727993397817.png

When I manually adjusted it in the console, the title rendered correctly.

A similar issue seems to be happening with the axis.

 

The challenge here is that the style is being applied directly to the div, not through a class. Also, my app is working fine on Mozilla and Safari, the divs have the correct height there which leads me to believe this could be an issue with V8.

 

I'm currently in touch with the Microsoft team and will keep you posted on any updates.

After seeing that the reports rendered correctly when placed as the only element on a page, I conducted further testing with my application and realized that the report worked fine when rendered in a div that did not have any "hidden" tag above it (I am using Tailwind CSS). This tag is equivalent to "display:none" in CSS.

 

In the following link provided by Microsoft support: Best Practices for Embedded Power BI Performance, it is mentioned in the "Bootstrapping the Iframe" section that, for now, "display:none" should be avoided as it can lead to erroneous results.

 

As a workaround, I restructured my application to avoid using display:none, and now everything is working fine again.

 

It's worth mentioning that my app had been functioning properly for months until the weekend of 9/20. However, seeing that this issue is already documented in the article mentioned, it seems that the problem with this tag has been around for some time.

Based on your post, I confirmed that the issue for us was also caused by the hidden class (we're using Tailwind as well) which we were using to implement a custom loading screen prior to the report loading.

 

I was able to replace hidden (display:none) with invisible (visibility:hidden) and some slight CSS adjustments to retain our existing UI. Those changes solved both issues we were seeing: slicer titles at 0 height and strange offsets on graph x-axis.

 

I greatly appreciate you continuing to update this thread as I was unable to find this issue noted anywhere else, we were essentially blocked waiting for a "fix" from Microsoft.

hectordanielc
Advocate I
Advocate I

Hi, @v-linyulu-msft 

 

I checked the three points, and everything seems fine.

 

This is a really strange issue. I was trying to identify the cause and attempted to republish the files in the workspace. I noticed that one file that was previously working stopped functioning after the republish. I then asked a coworker to publish it from her computer, and it worked again. This led me to think the issue might be with my computer. However, when she tried publishing another file that wasn't working, it didn't get fixed so my computer is not the problem. We also tested one of her older versions of the .pbix file from a month ago, but that didn't work either.

 

The problem started this weekend, and it seems to be related to Power BI.

Update.

 

Apparently there was an actualization on 9/20/2024 so tried with older versions. Happened twice that when I republish the file with the older version the first PBI Embedded consult was right but not the others. It was with july and may versions.

 

Seems like a version problem, but don't know why it only works once.

 

Also the first report that my coworker uploaded is still fine, but I haven't been able to identify what differenciates it from the others.

Update:

Found out that just by refreshing the app, sometimes the report is in the right format. Still looking for the main cause.

v-linyulu-msft
Community Support
Community Support

Hi, @hectordanielc 

Regarding the issue you raised, my solution is as follows:

1.Firstly, browser cache can sometimes cause display issues. Try clearing your browser cache and then reload the page.

vlinyulumsft_1-1727084829783.png

2.Secondly, ensure you are using the latest version of the Power BI embedding library. Older versions may have compatibility issues.
 

3.Lastly, if you are using custom CSS styles in your Next.js application, make sure these styles do not override or interfere with the default styles of Power BI visuals.

Styling: CSS Modules | Next.js (nextjs.org)


Hope my suggestion works.Of course, if you have any new ideas, you are welcome to contact us.
 

Best Regards,

Leroy Lu

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

Helpful resources

Announcements
OCT PBI Update Carousel

Power BI Monthly Update - October 2024

Check out the October 2024 Power BI update to learn about new features.

September Hackathon Carousel

Microsoft Fabric & AI Learning Hackathon

Learn from experts, get hands-on experience, and win awesome prizes.

October NL Carousel

Fabric Community Update - October 2024

Find out what's new and trending in the Fabric Community.

Top Solution Authors