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

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, "");

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("" + {
      edat = JSON.parse(;
        if ( (edat.height > 0) && (edat.width > 0) ) {
                document.querySelector('#iFrame1').style.minHeight = (edat.height + 100) + "px"  ;


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