How do I Resizing Embedded Dashboard Iframe Width
When embedding a dashboard using an iframe, you can resize the iframe container by adjusting the width and height parameters using both percentage (%) and pixel (px) values. However, the embedded iframe will occupy the available size based on the parent or ancestor element’s width.
Adjusting Iframe Width
To adjust the width of the embedded dashboard, you can modify the width attribute of the iframe element. For example:
<iframe src='http://localhost:50279/bi/site/site1/.......?isembed=true' id='dashboard-frame' width='80%' height='600px' allowfullscreen frameborder='0'></iframe>
In this example, the width of the iframe is set to 80% of the parent element’s width.
Using Containers
You can embed the dashboard within any container (parent div) or DOM element. The embedded iframe will occupy the available size based on the parent element’s width. If you set a specific width for the parent element, the embedded iframe (child div) with 100% width will occupy the parent element’s width limit only.
For example:
<div style="width:80%;position:absolute;left:200">
<iframe src='http://localhost:50279/bi/site/site1/.......?isembed=true' id='dashboard-frame' width='100%' height='600px' allowfullscreen frameborder='0' style="padding:10px;background-color:gray"></iframe>
</div>
In this example, the parent div has a width of 80%, and the embedded iframe has a width of 100%. The iframe will occupy 100% of the parent div’s width, which is 80% of the available space.
Conclusion
To resize the width of an embedded dashboard using an iframe, adjust the width attribute of the iframe element and ensure that the parent or ancestor element’s width is set accordingly. You can use containers, rows, and columns to organize your layout, but the embedded iframe will always occupy the available size based on the parent element’s width.
Additional References
