Display a report inside a React.js application with powerbi-client library

[lucavigo]

Hello,

I'm trying to display a published report inside a React Component but I've got some problems with dimensions.

The report doesn't fit the container without using fixed width and height.

With the config:

displayOption: models.DisplayOption.FitToWidth

inside a customLayout configuration, seems to work but not for the height, the container displays only a section of the report with a scrollbar.

With the config:

displayOption: models.DisplayOption.FitToPage

the report is displayed fitting the container area without adapting the height to the report size, so the report is shrunked and unreadable.

How can i automatically make the container adapt to the report's size or make the report adapt to the container? Suggestions?

Thank you,

Luca.

[dwh]

Hi @lucavigo , 

did you find solution?

Best Regards

[lucavigo]

nope

[lucavigo]

Hello,

thanks for your fast reply and sorry if I'm late but I got covid this week.

The problem with this solution is that i don't want to put constant pixel measures inside my project, i want the container to be responsive, do you think it is possible?

Best regards,

Luca.

[Anonymous]

Hi  @lucavigo ,

Please review the following threads which has the same problem as yours, hope they can help you also solve the problem.

how to give width and height in power bi report in embedding

To resolve this issue, set the height and width manually in the iframe instead of using 100%.Please find the reference code below:

<iframe width="1080" height="520" src="Your_source_link" frameborder="0" allowFullScreen="true"></iframe>

My output with height and width as 100%: 

After changing the height and width: 

Please find more references here: How to determine a Power BI report's width and height for embedding

How to determine a Power BI report's width and height for embedding

Fit content to angular powerBi client iframe

Best Regards