Power BI Embed with iframe and table size

[afbraga66]

Hello,

Currently trying to embed Power BI reports into a internal web page, using the iframe option generated inside Power BI.

The issue is that the tables text gets too tiny when adjusting the iframe size in the page.

Is there anyway in which the tables shown can match the size of the whole iframe or be responsive?

How to not have the black borders inside the red circles?

Could instead the use of the API be a solution to this issue?

Thank you.

Best regards,

André

[v-rzhou-msft]

Hi @afbraga66 

It seems that your embed report in iframe is too small and will show grey in Blank space.

Please check whether you have set iframe width and height to 100%.

<iframe width="100%" height="100%" src="" frameborder="0" allowFullScreen="true"></iframe>

Or you can try this tool, it may help you to get rid of grey areas in iframe:

https://lukaszpawlowski-ms.github.io/Optimize-Publish-To-Web/

Best Regards,

Rico Zhou

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

[afbraga66]

Hey,

Thank you for your reply. But for example if I put a chart it is adjusted to the size, is it because power bi charts are responsive and tables are not?

Best regards,

Andre

[v-rzhou-msft]

Hi @afbraga66 

This may be caused by the frame of your internal web page. 

If you use publish to web, embed to website and portal or embed to sharepoint, it is best to edit the HTML provided to specify the desired height and width to fit into your portal’s web page.

Or you can try to remove the styling from the iframe using javascript and then rely on css.

Here we embed into a div called reportContainer

<div id="reportContainer"></div>

Use this CSS to style the reportContainer div

<style>
    #reportContainer {
        min-height: 800px;
        min-width: 1330px;
    }
</style>

Please use this javascript to remove the "style="width:100%;height:100%" style attribute from the iframe and set the iframe height and width attributes to the height and width of the reportContainer div.

<script>

    // make this a function so you can pass in a DIV name to support the ability to have multiple reports on a page

    function resizeIFrameToFitContent(iFrame) {

        var reportContainer = document.getElementById('reportContainer');

        iFrame.width = reportContainer.clientWidth;
        iFrame.height = reportContainer.clientHeight;

        console.log("hi");

    }

    window.addEventListener('DOMContentLoaded', function (e)
    {
        // powerbi.js doesnt give the embeeded iframe's an ID so we need to loop to find them.
        // assuming the only iframes that should be on any of our pages is the one we are embedding.
        var iframes = document.querySelectorAll("iframe");
        for (var i = 0; i < iframes.length; i++) {
            resizeIFrameToFitContent(iframes[i]);

            // PowerBI JavaScript adds "width:100%;height:100%;" in the style attribute which causes sizing issues. We'll style it from JavaScript and CSS. So we'll strip the inline style attribute from the iFrame.
            iframes[i].attributes.removeNamedItem("style");

            //alert(iframes[i].parentNode.id); // gets the parent div containing the iFrame. Can use this to make sure were re-rizing the right iFrame if we have multiple reports on one page.

        }
        });

</script>

Best Regards,

Rico Zhou

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

[afbraga66]

Hi @v-rzhou-msft 

The issue is that when trying to embed more than one report in the same web page the tables inside the reports have the text too small because they are adjusting to the report height. Is there any way around it? Apart from increasing text font.

Thanks,

André