Adjust iFrame in Lightbox

I am trying to auto-adjust the height of a lightbox that contains an iframe form.

https://rbs.org/events/2024/5/30/introduction-to-missions

When "Registered to Attend" is clicked, and the user then clicks "Continue" at the bottom of the form, the lightbox should adjust to match the shorter size.

The lightbox displays this page:

https://rbs.org/event-registration-3-day

Which uses a "menu" block to display iframes.

Here is a code snippet:

3 DAYS
=========

<iframe src="https://rbs.populiweb.com/router/forms/respond/g875310357019404d72aafd84465c301289e8615f0cbe01450a725dc7a4757421f2831f8f76ddff7a2d0a38d7d7b2a113834d6ee810a98ac81531a73af7aec017757a0e8f1239a4edef5b4b8391497f431e79e93ae8cfc52ec15325c1c0725286a22aeb56467a41c7aee1092c1d3c?embedded=1" style="width:1px; min-width:100%; height:1600px" frameborder="0"></iframe>

2 DAYS
=========

When "Continue" is clicked in the form, the height remains at 1600px. 

Any way to overcome this and make the height dynamic?

This isn't something you can adjust without having code level access to the page that's inside the frame. Is this your own page or from a third party service? Sometimes they have a little checkbox hiding in that final screen to copy your code to make it responsive, I know that airtable does that but without something like that you can't adjust the size of the frame based on the content inside it.

12 minutes ago, JayVanDyke said:

This isn't something you can adjust without having code level access to the page that's inside the frame. Is this your own page or from a third party service? Sometimes they have a little checkbox hiding in that final screen to copy your code to make it responsive, I know that airtable does that but without something like that you can't adjust the size of the frame based on the content inside it.

Yes, this is my page.

Then only thing I cannot adjust is how the form behaves under the rbs.populiweb.com domain. 

@vcRBS that's the domain I'm referring to. You need to run code on the page that's inside the frame, i assume at that other domain, that recognizes how long it's own content is and sends something out to the parent site to adjust the height. Without being able to add code in your form you can't adjust this unless someone else here knows a workaround.

@JayVanDyke So it looks like the populiweb.com domain is able to handle dynamic sizing:

This is from the populiweb.com support team.

However, I'm not sure how to get it to work.

I tried to follow the instruction on https://github.com/davidjbradshaw/iframe-resizer and added the iframeResizer.min.js file to the website.

But as to the sample code

<style>
  iframe {
    width: 1px;
    min-width: 100%;
  }
</style>
<script src="/js/iframeResizer.min.js"></script>
<iframe id="myIframe" src="http://anotherdomain.com/iframe.html"></iframe>
<script>
  iFrameResize({ log: true }, '#myIframe')
</script>

I'm not sure where to place each component.

What I have so far is this in the Menu code block:

3 DAYS
=========

<iframe id="myIframe" src="https://rbs.populiweb.com/router/forms/respond/g875310357019404d72aafd84465c301289e8615f0cbe01450a725dc7a4757421f2831f8f76ddff7a2d0a38d7d7b2a113834d6ee810a98ac81531a73af7aec017757a0e8f1239a4edef5b4b8391497f431e79e93ae8cfc52ec15325c1c0725286a22aeb56467a41c7aee1092c1d3c?embedded=1" frameborder="0"></iframe>

2 DAYS
=========

The Header Injection for that page has:

<script src="/s/iframeResizer.min.js"></script>
<style>
  iframe {width: 1px; min-width: 100%;}
</style>

<script>
iFrameResize({ log: true }, '#myIframe')
</script>

But as you can see here https://rbs.org/event-registration-3-day the height is actually collapsed now.

Any suggestions?

@JayVanDyke Any further thoughts on this?

Thank you for considering.

It sort of looks like everything is there. Without getting my hands dirty its hard to tell. In that support message they said to send a ticket or something, i would go with their support first and see if they can help

@JayVanDyke I have contacted the tech support with Populi. Here is the reply:

I checked by squarespace files, and the iframeResizer.min.js  is listed there.

ahh right! Try changing the filename. I feel like the .min thing gets weird with those uploaded files. so no .min.js just .js at the end.

@JayVanDyke Still no go. Deleted the iframeResizer.min.js  file, renamed, and reuploaded iframeResizer.js. Then changed the src reference in the header injection.

Chrome Dev tools shows that the file fails to load. However, it is looking for a .map file apparently...

@vcRBS it looks to me like the js file is loading just fine but it isn't working for some reason. The filename i guess could cause it but I dont think so. Not sure what it isn't working, maybe its the file on the other end that isn't working right.

Just out of curiosity see if this helps. Move the whole thing to the footer and change the init code to this. Maybe its taking too long to actually load the frame and the code runs before it even exists in the DOM? If that doesn't work, maybe use some code that waits until the #myIframe element exists. 

<script>
  window.addEventListener('load', function() {
    iFrameResize({ log: true }, '#myIframe')
  });
</script>

@JayVanDyke Looks like that extra line of code worked! I did not have to move anything into the footer.

However, it appears to only work on the desktop version of the site. The mobile version seems to be adding a lot of extra margin and does not scale properly.

@JayVanDyke I think I almost got this resolved. I need to be able to target the style of the iframe resizer:

I need to edit the padding as shows in the attachment.

I've tried different things, but it does not apply after editing the header injection code.

Perhaps I am not placing the code in the right location?

<script src="/s/iframeResizer.js"></script>
<style>
  iframe {width: 1px; min-width: 100%;}
  document.querySelector("#content") {padding: 0px !important;}
</style>

@JayVanDyke preloading the popups did the trick. Thank you!