How to update your iframe size to remove vertical scrolling for an embedded app

Community Show & Tell
1

If you use re-tool embedded apps, chances are your iFrame has scrollbars, and on mobile devices these can really be a UI pain, especially in cross origin cases.

In a cross origin case, your parent cannot read your re-tool app width and height, you need to send it via a postMessage.

On your app you will first need to do as shown here: Embeding Retools, Message to Parent - #2 by kbn

Settings > Beta > Enable parent window communication

Setup a query or javascript that does:

let message = JSON.stringify({loaded : "yes", height: viewport.height, width: viewport.width });
parent.postMessage(message, "https://woodruff.retool.com");

This will do a postMessage to your parent.

On your parent you will need to do an event listener (this is standard)

<script type="application/javascript">
 window.addEventListener('message', function(event) {
        if ( isJsonString("" + event.data)) {
      edat = JSON.parse(event.data);
        if ( (edat.height > 0) && (edat.width > 0) ) {
                document.querySelector('#iFrame1').style.minHeight = (edat.height + 100) + "px"  ;
        }
  });

</script>

I hope that helps you to get rid of scroll bars! This can be extended for dynamic changing... but at least there is something for you to get started on.

1 Like