Jump to content

iFrame responsive to changing content height

Recommended Posts

Site URL: https://heidiandscott.squarespace.com/

I am trying to embed the following on my site:

<iframe src="https://www.online-rsvp.com/event/index.php?event_id=4982&embed=1&token=b3fc3df4027237dc117fd5f5ba582986" style="min-height:800px; width:100%; border:none" title="Online-RSVP.com event" onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';"></iframe>

The form is dynamic and the height is variable based on what is entered. Type "Joe Smith" into the first and last name fields.

I've tried adjusting the height to 1500px which gets the job done (no scroll bar) but it's not elegant as it leaves the too much empty space. Once the form is submitted, the content shrinks to ~300px and you won't be able to see the "Success" message unless you scroll all the way back up.

I've tried using CSS to create a responsive container, like this: https://blog.theodo.com/2018/01/responsive-iframes-css-trick/ But the content still gets cut off and the scroll is enabled.

Any suggestions to have the iframe increase and decrease in height as the form is filled out? Thanks in advance!

Edited by hwong
Correcting the site URL
Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.