iFrame responsive height

Together, we want to build an ultra-connected interface for users. That means no clicking between browsers, no iframes with clunky scrollbars, and no crazy clashes in UI/branding. apaleo one displays your app’s data directly within apaleo’s PMS.

Every responsive target app supports the native Apaleo script.

Native Apaleo script

All you need to do is add the following script to your application’s HTML file:

<script onload="broadcastIframeHeight()" src="https://cdn.apaleo.com/scripts/broadcast-iframe-resize.min.js" defer></script>

You can optionally provide an element as an argument if your app’s body element is not a main scrollable container:

<div id="scrollableContainer">...</div>
<script onload="broadcastIframeHeight(document.getElementById('scrollableContainer'))" src="https://cdn.apaleo.com/scripts/broadcast-iframe-resize.min.js" defer></script>

Migration note (iframe-resizer)

If you previously used the deprecated iframe-resizer library, remove it and use the native Apaleo script above instead. Avoid running both at the same time.

Things to be aware of

We only support resizing the height of the iframe. This means your application needs to be responsive. If content overflows horizontally, it won’t be visible.

Troubleshooting checklist

  • Verify the script loads successfully from https://cdn.apaleo.com/scripts/broadcast-iframe-resize.min.js.
  • Ensure your Content Security Policy (CSP) allows loading scripts from https://cdn.apaleo.com.
  • Confirm broadcastIframeHeight is available and is called after your scrollable container exists in the DOM.

Frequently asked questions

Question: My notification / toast message isn’t visible. I have to scroll to the bottom of the page to see it.
Answer: That happens because the iframe has the same height as your application and because of that the notification stays at the bottom of the page. You can use the notification functionality provided by the UI.