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 supports these two solutions:

  • native Apaleo script (recommended)
  • iframe-resizer library by David J. Bradshaw (deprecated)

The native Apaleo script is the recommended way to seamlessly integrate your application into Apaleo. All you need to do is to add the following script into 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>

iframe-resizer (deprecated)

NOTE: Apaleo uses iframe-resizer v4. Newer versions will not be integrated with Apaleo. We strongly encourage using a native script, described above. iframe-resizer integration will be removed in future in favor of a native solution.

How to use it

You just have to install the library and load the file iframeResizer.contentWindow.min.js into your application. That’s it. You don’t need anything else. After that, the iframe will have the same height as your application.

You can also use a cdn, if you don’t want a local installation of the library.

Things to be aware of

The library doesn’t support elements that are positioned fixed. The reason for that is, that the iframe doesn’t have any scrollbars anymore. The scrolling is moved to the parent window (apaleo), so your fixed element isn’t aware of scrolling events.

Dialogs and other modals aren’t fully supported by the library too. If your application has a very long page and the user isn’t in the correct position, then the user may have to scroll to see them. Don’t panic, we are working on a solution to fix this problem.

We only support resizing the height of the iframe. That means, that your application needs to be responsive, otherwise if there is an overflow in the width, then that part will be not visible.

Frequently asked questions

Question: It works on page A but not on page B.
Answer: You have to load iframeResizer.contentWindow.min.js on every page.

Question: The height of my application isn’t detected correctly.
Answer: You can use another height calculation method. The options are listed here.

Question: I opened a dialog and the height didn’t change.
Answer: That happens because the library can’t always detect the dialog. You can switch the height calculation method. The options are listed here. You can also use a min-height for your application.

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.