brett_w_green
Data Storage
Joined 3 years ago
User Profile
User Widgets
Contributions
Re: Dynamic Resize For Embedded IFrames
I'd like to add a solution which I though was nicer. I added the package iframe-resizer to our project (https://www.npmjs.com/package/iframe-resizer) Styled the iframe as so: <iframe id="analytics-iframe" frameborder="0" class="dynamic-sizing" width="100%" url="your-dashboard-url"></frame> Added a bit of css to initialize: iframe.dynamic-sizing { width: 1px; min-width: 100%; min-height: 500px; } Added the javascript to the Dashboard script from https://raw.githubusercontent.com/davidjbradshaw/iframe-resizer/master/js/iframeResizer.min.js (Same as original answer... click Ellipsis on Sisense Dashboard and choose Edit Script and paste that minified code in there) On the front end, in our scripts in the hosting apps, I just added this: $("iframe.dynamic-sizing").each((el) => { iFrameResizer({ log: true, autoSize: false, heightCalculationMethod: 'lowestElement' }, el.id) }) Essentially what it does is very similar to original answer. The embedded dashboard sends a message to parent application and it resizes if the window changes dimensions. Worked perfectly for me.2KViews0likes0Comments