Hey everyone. I’m having an issue getting a section with an iframe embed to my app to expand to the size of the iframe.
Essentially, right now when I iframe into my webapp from my webflow page the container fills with the iframe and there is a scroll within the embed to scroll down on the web app.
What I want to accomplish is the section and the container becoming responsive to the full height of the iframe so that there is no double scroll on the website.
Anybody know how to accomplish that?
Here’s the link, The embed is one of the last sections.
Welcome!
For future reference:
Please include a visual description, a section name, a screenshot, a description of the location. Any of these will save the community time searching/guessing what you’re referencing.
Only solution I can think of but there are drawbacks:
You can use sticky position on that element. It will pause until the user scrolls to the bottom of the iframed content, and then continue. Downside: if someone tries scrolling outside of the iframe div, they’ll essentially be stuck.
actually, nevermind… doesnt work well. Works better as you have it.
You’re generally stuck setting the IFRAME height manually based on the content you know will load, and then making that height responsive since the IFRAME height will likely change across breakpoints.
In some cases it’s possible to get fancier with some research into scripts that can calculate the IFRAME content height after it loads, so the parent can size the IFRAME precisely… but it can be tricky to make it work with cross-origin content, and the UX experience can be wonky if the IFRAME content loads slowly…
Parent page loads
IFRAME content loads
Parent page has layout shifts to accommodate the IFRAME content