I am new’ish to web creation and new to webflow. I have mostly figured out 90% of what I am trying to accomplish but I cant seem to solve one issue.
On the mobile/tablet breakpoints I have an IFrame that has daily appointment slots. So 1 day could have 3 booking slots and another could have 9… When it reaches a certain amount it then puts in a slider bar and doesn’t resize… I have mucked around with 100%, 100VH and adding in min heights but there doesn’t seem to be a good solution.
I currently have the IFrame sitting inside a div but other than that theres no other “containers” on the page yet that might be fighting with the sizing?
Correct, IFRAMEs don’t resize to fit the content. The content must fit the IFRAME.
I’ve implemented some script based solutions for this in the past but in general you can’t detect that the content in the IFRAME has changed, when it’s from a different domain origin, due to browser security policies.
At the end this means you need a different approach. Either accept the scrollbar, or find some way to make the IFRAME as large as the largest size you’ll need, and build your layout to fit that requirement.
Implement CSS media queries to adjust the size and layout of the iframe based on the device’s screen size. This allows you to customize the appearance of the iframe for different breakpoints, ensuring it displays properly on mobile and tablet devices.
Verify that the parent container of the iframe (in this case, the div) is properly sized and configured to accommodate the iframe and any additional elements within it. Adjusting the sizing and layout of the parent container may help resolve any conflicts with the iframe’s dimensions.
Did you by any chance use the following scripts before: https://github.com/davidjbradshaw/iframe-resizer? I’m currently trying to achieve the same and this library seems to be capable of doing the job pretty well (including cross-origin communication via postMessage). Might be worth trying for you as well!
I found this library through this article, where they also explain how they’ve implemented it. I haven’t been able to initialize the scripts through Webflow myself yet, but that’s basically because of my limited knowledge of Js. I’ll ask a more experienced dev to jump in, but it seems there is a neat solution to achieve what the OP wants!
What I did so far:
-downloaded the right scripts here
-added both scripts separately to our own CDN
-added the CDN link that points to the first script to the body of the site I’d like to iframe
-added the setup script (incl the 2nd CDN link) to an embed element in Webflow
-The iframe isn’t resizing yet, I guess because I don’t actually initialize the scripts yet. As soon as I got this to work, I’ll share it here!
David’s work looks familiar, but I’ve not seen any approach that can legitimately circumvent the browser’s security model. That means if you’re IFRAMEing a 3rd party widget, like a calendly embed, you’re out of luck because you cannot inject your code for the message handling.
The only way I’ve found to resolve that in larger projects that justify the expense, is to build a reverse proxy that modifies the embedded content directly to inject that script. That approach comes with security concerns and consequences, and is pretty much a page from a hacker playbook.
Thanks for pointing out the security risks and other limitations! I’ll do some tests to see if they are also limitations in our (fairly simple and temporary) use case.