iFrame resizer details

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.

iFrame Resizer

Every responsive target supports the library iFrame resizer by David J. Bradshaw.

This library enables the automatic resizing of the height and width of both same and cross domain iFrames to fit their contained content. - David J. Bradshaw

That means, that the iframe has a dynamic height in apaleo. It resizes in accordance with the height of your application. In other words, the library allows apaleo to handle the scrollbars for you.

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.