Skip to main content
Solved

mobile version

  • 23 May 2024
  • 3 replies
  • 163 views

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

3 replies

Kelsi
Userlevel 7

Hey@Bridal33262 -- thanks so much for your post! Sorry to hear about this -- but I know what’s going on and have a solution for you! Yay! 🤗

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. 

Kelsi - Calendly Community
B

Hey@Bridal33262 -- thanks so much for your post! Sorry to hear about this -- but I know what’s going on and have a solution for you! Yay! 🤗

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?

Kelsi
Userlevel 7

Hey there @Bridal33262 -- thanks for following up! I am glad that the code fixed the issue (mostly!) for you.

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! 

Kelsi - Calendly Community

Reply


Terms & ConditionsCookie Settings