Jump to content

Adjust iFrame in Lightbox

Go to solution Solved by JayVanDyke,

Recommended Posts

Posted

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?

Posted

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.

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

 🛠️ Web Designer's Toolkit

**some of these contain affiliate links

Posted (edited)
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. 

Edited by vcRBS
Posted

@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.

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

 🛠️ Web Designer's Toolkit

**some of these contain affiliate links

Posted

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

image.thumb.png.4e8c9323408bf314f24c5e7b8852cad1.png

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?

Posted

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

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

 🛠️ Web Designer's Toolkit

**some of these contain affiliate links

Posted

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

Adam Sentz (Populi Support)

Jan 19, 2024, 1:58 PM PST

Hi Vadim,

I took a look at https://rbs.org/event-registration-3-day and iframeResizer.min.js is not loaded. I tested loading it manually in via my browsers console and then running iFrameResize({ log: true }, '#myIframe') and it works fine (see screenshot). 

So this issue is entirely on the Squarespace end. First you need to make sure that iframeResizer.min.js is actually loading, then you need to call  iFrameResize({ log: true }, '#myIframe') after your iframe wherever you include it. I don't know enough about how Squarespace works to be specific about how to do this, but someone who is familar should be able to give you the steps.
Posted (edited)

@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...

Screenshot 2024-01-19 at 23.07.08.png

Edited by vcRBS
Posted

@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>

 

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

 🛠️ Web Designer's Toolkit

**some of these contain affiliate links

Posted

@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.

Posted (edited)

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

 

Screenshot 2024-01-23 at 12.49.14.png

 

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>

 

Edited by vcRBS
  • Solution
Posted

First, even with this library I don't think you can target things inside the iframe with JS directly like you're trying to do but secondly, this line here 

document.querySelector("#content") {padding: 0px !important;}

is javascript and won't do anything inside of style tags. I wonder if it's loading the library and trying to attach to your iframe before it's even on the page since it's loading in a lightbox after you click. On the plugin settings page you could try their code injection or maybe try preloading the popups, that one is just a checkbox in the setup page. If none of that works I'm not sure what else to do without really getting into the site. Feel free to dm me if youd like to chat about it!

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

 🛠️ Web Designer's Toolkit

**some of these contain affiliate links

  • 2 weeks later...

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.