Power BI Embed with iframe and table size

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.