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.
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
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: 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.