Hello!
We use a calendar on our website, but we have a problem. In the mobile version of the application, the form does not scroll. If the form is long, there is no way to scroll down. How can we solve this problem? https://bridalbreeze.online/appointment
Best answer by Kelsi
Hey
I was able to inspect the code on your site and I noticed that your theme has automatically added some extra inline styles to the embed code.
Adding overflow-y:auto to this element can cause the div element itself to scroll -- this scroll is very small, so it can be hard to spot. Normally the scrolling elements are: your page and the iframe (if the height of the embed cannot contain all the content). When this style is applied, it adds another scrolling element behind the iframe which iOS especially does not handle well.
To fix this, you can add the following code directly beneath your Calendly code in the same custom code block:
<style>
.calendly-inline-widget { overflow-y: hidden !important; }
</style>I hope this helps! Let me know if you run into any issues.
Hey
I was able to inspect the code on your site and I noticed that your theme has automatically added some extra inline styles to the embed code.
Adding overflow-y:auto to this element can cause the div element itself to scroll -- this scroll is very small, so it can be hard to spot. Normally the scrolling elements are: your page and the iframe (if the height of the embed cannot contain all the content). When this style is applied, it adds another scrolling element behind the iframe which iOS especially does not handle well.
To fix this, you can add the following code directly beneath your Calendly code in the same custom code block:
<style>
.calendly-inline-widget { overflow-y: hidden !important; }
</style>I hope this helps! Let me know if you run into any issues.
Hey
I was able to inspect the code on your site and I noticed that your theme has automatically added some extra inline styles to the embed code.
Adding overflow-y:auto to this element can cause the div element itself to scroll -- this scroll is very small, so it can be hard to spot. Normally the scrolling elements are: your page and the iframe (if the height of the embed cannot contain all the content). When this style is applied, it adds another scrolling element behind the iframe which iOS especially does not handle well.
To fix this, you can add the following code directly beneath your Calendly code in the same custom code block:
<style>
.calendly-inline-widget { overflow-y: hidden !important; }
</style>I hope this helps! Let me know if you run into any issues.
Thanks!
We inserted the code and it worked! However, it didn't work on all devices.
Can you tell me why?
Hey there
This would definitely apply on all devices (unless you added it somewhere that only applies the CSS to certain devices, by chance?) -- so I am not entirely sure what that means, based solely on what you shared. Can you provide more context, including screenshots, for me? What I had you do should improve scrolling on iOS -- but won't necessarily 'fix' it. iOS handles multiple scrolling elements differently when compared to other platforms/devices. While other platforms will automatically switch scrolling elements, you'll often need to lift your finger for a second if you need to switch which element (e.g. switching between the main page and the embed) you're scrolling on iOS. Give this a try and see if that helps!
If this info is not helpful, please do provide more context and we’ll try to dig a bit deeper! ⚙
That said -- I do want to let you know that an actual fix for this is being workshopped and will release very soon! I’m talking days, here, not weeks or months. So be on the lookout for a more user-friendly scrolling experience on iOS, coming your way!
Already have an account? Login
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.