Webflow Calendly remove the scrollbar

Design help Layout & Design
#1

Hi,

I’m currently working on a client site and I ran into an issue with the booking tool. The addon Calendly provided comes with a revolting scroll bar. I did some research and found a solution.

Click on the blue “Termin Vereinbaren” button to see the booking tool.
Client project = https://advokatur-fanger.webflow.io/

Solution Calendly :

Remove scroll bars

Depending on the host and theme you’re using for your website, your visitors may encounter a Calendly embed module with a scroll bar. The scroll bar appears when the embed exceeds the size of the container, which is controllable in your site layout. To remove the additional scroll bar, you can increase the height specified in the code copied from your account:

<div class="calendly-inline-widget" data-url="https://calendly.com/yaron-fanger" style="position: relative;min-width:320px; **height:750px** ;" data-processed="true">

I placed the div block into bevor the tag, with no success.

Any help is appreciated,

Take care & enjoy the weekend

#2

I’m facing the same issue! Were you able to find a solution to this?

#3

Hey @Breadbarry, I was able to poke around and come up with a solution.

The code that you copy from Calendly’s inline embed option has some height parameters. I think that standard is at 630px. I was able to get rid of the scroll bar entirely for desktop view by changing the height parameter on the code snippet to 650px.

The scroll bar does come back for tablet and mobile views but I’m happy with how the project looks on those view ports so I left it as is.

My suggestion to get rid of the scroll bar on tablet and below, set the embed element to a fixed height. Play around with the values and see what works.

1 Like
#4

you just need to create a class add the width and height and remove the inline styling from the calendar embend code. use the media query to remove the scroll bar on all devices by setting the different height, width for mobile, tablet and desktop.