Hi,

A user was asking me today that his popups in the iframe do not work properly and how to fix this. They show much too long as many of the popup solutions take the e.g. 90% of the visible height as height of the popup. This works fine outside the iframe as there is then a scroll bar. Some scripts e.g. use clientHeight to get this value.

If you now have the same page inside an iframe AND you use auto height then there is no scroll bar anymore for the iframe. So lets assume the page is 3000px and browser height is 800 px. So you have a scroll bar. Outside the iframe the popup script gets 800 as visible height and uses 90% as height = 720. Inside the iframe with auto height enabled the same code would return the full height of the page so if the whole page is 3000px the script uses 3000 - 10% = 2700 -> the popup is too big.

The best solution to fix this is to fix the popup script itself to work properly also in an iframe.

If this is not possible and you are able to modify styles in an iframe (also see https://www.tinywebgallery.com/blog/forum/advanced-iframe-faq/how-can-i-show-only-a-part-of-the-page-in-the-iframe) you can try to overwrite some of the styles the popup is using. Open a popup and press F12 to open the developer tools. There you can than play around with the styles. e.g. to use "height: 90vh" as height, a fixed height e.g. "height:500px" or a max height e.g: "max-height: 90vh".

Once you have a solution that works for you go to the advanced tab -> modify the iframe

set:

Content id in iframe: <the selector - e.g. #popup>

Content styles in iframe: <the style - e.g. max-height: 90vh>

Save this so that ai_external.js is generated again. Often several styles needs to be modified. Please separate them by |. See the documentation in the administration for details.

Hope this helps someone ;). Please note that basic css knowhow is mandatory here.

Best regards, Michael