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
2

Show one vertical scroll bar for the desktop and none for the mobile layout using a Retool public app embeded iframe that expands as data are loaded from 350K+ rows Retool table, without a Listener at your web site and a query/script in Retool.

[Thanks to AP] (https://help.zoho.com/portal/en/community/topic/html-snippet-iframe-scroll-bars)

<style>
.parent-container {
	display: flex;
	width: 100%;
	height: calc(100vh - 120px);
 }
.child-container {
	flex: 1;
	margin: 0px;
}
</style>
<div class="parent-container">
	<iframe src="your retool URL" frameborder="0" allowfullscreen class="child-container"></iframe>
</div>

It worked for me with 0px for margin above and disabling showing a Footer for the squarespace page that contains the embeded Retool URL.

See it live on

CarPartPrice.com/compare