Calendly embed making scrolling a problem

[oscarbnihrane]

Hello Theme X support!

I have a problem with my Calendly Embed. The reason of this, is because once on mobile, the calendly embed makes scrolling past it a problem. I have been inside the code of the Calendly embed, and I have incleased the Heigt to 1300 pixels, making the embed itself long enough to feature all the text on it without having to click on a dropdown on the calendly embed itself. Still, when scrolling past the embed, the scroller locks on calendly making it hard to scroll past and get down to the footer. I’ve attached an image of it below. Hope it makes sence. If not, tell me and Ill attach a loom video.

The ideal outcome is that the calendly do not make scrolling past it a problem.

Thanks in advance!

[prakash_s]

Hello @oscarbnihrane,

Thanks for writing to us

I checked your site on my phone(iPhone 7 plus) it seems that is working fine. I would suggest you please purge all the cache of WP-Rocket and clear your browser cache then check it again. Please have a look at the given video in the secure note.

Thanks

[oscarbnihrane]

Checkout these links:)

Webolir Calendly scrolling problem

I explain the problem here:)

[friech]

Hi Oscar,

Thank you for the explanation,

@oscarbnihrane

I have incleased the Heigt to 1300 pixels, making the embed itself long enough to feature all the text on it

That height might look enough, but for the Calendly Embed Form it might not be, so add overflow: hidden; to it, so the Calendly Embed Form will not have its own scrollbar, which is the cause of your issue.

Cheers,

[oscarbnihrane]

Hello Friech,

Thank you. That overflow: hidden; is exactly what I need I think. Where in the calendly code do I put it though?

Could you send a description of that?

Thanks in advance!

[marc_a]

Hi Oscar,

Please add the overflow: hidden; in where you add the height 1300px because currently it is set to overflow-y: auto.

Hope that helps.

[oscarbnihrane]

Hello,

Not really, but still thanks for the reply!

Can you show me exactly where I have to imput it in my screenshot. I have given you permission to my site, so I’d prefer if you just did it and afterwards told me so I could see where you edited the code.

Thanks!

[marc_a]

Hi Oscar,

You can add this custom CSS code to your homepage page CSS.

.calendly-inline-widget, .simplebar-content-wrapper {
  overflow: hidden !important;
}

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

Thank you.

[oscarbnihrane]

Hello,

Thank you. However the problem is not fixed yet. Whenever in mobile, and you click on “show more” on the Calendly embed, it does the same thing again. How do I fix this? Try for yourself on your own mobile phones.

Thanks!

[marc_a]

Hi Oscar,

The issue with the “show more” on the calendly embed is that the HTML inside the iframe is set to overflow: auto; and there’s no option we can target that HTML using the CSS because we don’t host the iframe. This is to stop XSS (Cross Site Scripting). That being said, I suggest that you reach out to calendly and ask them to change the HTML from overflow: auto; to overflow: hidden;.

Hope that helps.