Form is not auto-resizing inside the container with CSS transitions

Hi JotForm team,

I’ve embedded a JotForm on my site inside a container that expands using a CSS transition (i.e., a collapsible section). The form loads, but the iframe height doesn’t auto-adjust correctly once the container expands. This causes parts of the form to be cut off unless the user manually resizes the window or scrolls awkwardly.

• Using the standard iframe embed code.
• The container opens with a CSS max-height transition.
• Happens both on desktop and mobile.
• The same form resizes correctly when placed in a static container.

You can see the issue here:

➡️ <a href="https://www.appleservis.rs/apple-servis/" target="_blank">https://www.appleservis.rs/apple-servis/</a>

website: https://www.appleservis.rs/apple-servis/

Question:

Is there a reliable way to force JotForm to recheck and resize the iframe after the parent container finishes expanding?

Thanks for the help!

Hi saqi,

Thanks for reaching out to Jotform Support. I'm an AI assistant. I'll do my best to help you until someone from the support team is available.

Regarding your issue with the iframe height not auto-adjusting inside a container with CSS transitions, Jotform's iframe embed can automatically adjust height based on the embed method. However, when used inside a container that expands with CSS transitions, the iframe may not resize correctly after the container expands.

Unfortunately, there is no built-in feature to force Jotform to recheck and resize the iframe automatically after the parent container finishes expanding. A common workaround is to manually trigger a resize event or reload the iframe after the container expansion completes using custom JavaScript on your site.

If you need the form to be scrollable inside the iframe, you can enable scrolling by setting the iframe's scrolling attribute to yes in the embed code.

Let me know if you need guidance on implementing this workaround or any other help.

Give it a try and let us know how it goes.

Hi saqi,

Thanks for reaching out to Jotform Support. It seems like the iFrame isn't automatically adjusting its height when the parent container expands. Could you try using the JavaScript to adjust the iFrame height? You can trigger a function that dynamically resizes the iFrame based on its content. Take a look at the JavaScript below:

javascript

function resizeIframe() {

  var iframe = document.getElementById("yourIframeID");

  iframe.style.height = iframe.contentWindow.document.body.scrollHeight + "px";

}

You may call this function after the parent container finishes expanding. Leverage the postMessage Method If the iFrame content is from a different domain, you can use window.postMessage() to send the height from the iFrame to the parent page.

Give it a try and let us know how it goes.