CSS mismatch when report is rendered using powerbi-client-react library

[xeroOrex]

We have a power Bi Report which has a mobile layout as well. While rendering the report in our Single Page Application, based on the screen size we render either MobilePortrait or MobileLandscape layout. Now when we render the same report in power bi mobile application and compare the rendering, we see there are few CSS issues.

1. The buttons are missing paddings. PFB the screenshot which compares two different versions of rendering. One is using our SPA and powerbi-client-react lib and the other is using Power Bi mobile application.

Using Powerbi mobile application (Proper css alignment present)

using Powerbi-client-reactlib (paddings/margins are missing)

2. report texts are not visible properly

using Power bi mobile client app (all texts shows perfectly)

in our SPA , using powerbi-client-react lib

We are not adding css to any of the classes explicitly except height and width of this below class

Please check this issue asap, let us know if we are missing anything

[v-MadhavC]

We Have embedded a sample report using Power BI Client React library but we are not experiencing any CSS mismatching issue when the report is rendered.

For better understanding of the issue can you please provide some additional details regarding how you are embedding your report.

Embedded report using React-wrapper in Mobile layout.

[xeroOrex]

Thanks @v-MadhavC for your response.

By mismatch I meant how it renders in native Power BI Mobile app and how it renders using the powerbi -client-react library in a mobile device are different. You can see the screenshot I provided earlier.

Here is the configuration we are using. Please let me know if you need more details. I would be happy to provide if any more info is needed.

` const [repConfig, setConfig] = useState({ type: "report", embedUrl: undefined, id: undefined, hostname: "https://app.powerbi.com", tokenType: models.TokenType.Embed, accessToken: undefined, settings: { layoutType: window.innerWidth > 768 ? models.LayoutType.Custom : models.LayoutType.MobilePortrait, customLayout: { displayOption: models.DisplayOption.FitToWidth, }, navContentPaneEnabled: false, panes: { filters: { expanded: false, visible: false, }, }, }, });

useEffect(() => { if (props.item) { setConfig({ ...repConfig, embedUrl: props.item.embedUrl, accessToken: props.item.accessToken, id: props.item.id, }); } }, [props.item]);`

Then using this config we are rendering the report

`

{ window.report = embeddedReport; }} />

</div>`

[v-MadhavC]

This is an old issue, is it still relevant?

[v-MadhavC]

We are waiting for your response. If no response is received within the next couple of weeks, the issue will be closed.

[ayeshurun]

The issue is closed since no response was received.