Forum Discussion
Advocate ITitle and Axis Problem with PBI Embedded Reports
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.
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.
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.