You are here

Easy & dynamic iframe resize

Submitted by Daipayan Dhar, Last Modified on 2019-11-22

Iframe is evil, period! However, there are situations and circumstances where you may need to resort to one. If you are facing a similar situation, please read on...

Let's say you need to display dynamic content inside an iframe and want to re-size the iframe based on content height. It will be nightmare for you. In my case, the iframe was a temporary solution for hosting a sub-site inside the main web application that will eventually be invoked via a user control.

There is a wonderful open source library available for dynamic iframe re-sizing. The details are available here: https://github.com/davidjbradshaw/iframe-resizer

Everything is self-explanatory. However, I will call out some key points:

1. Have the option "enablePublicMethods" set to true
2. I could get desired height calculation with the option "heightCalculationMethod" set to "lowestElement"
3. You can also use this library to set the scroll position of the iframe. This is particularly useful in a single page application (SPA) where the scroll position is retained.

Discussion or Comment

If you have anything in mind to share, please bring it in the discussion forum here.

https://forum.everyething.com/others-f41/