Learn

Webflow + Bookings & Reservations

Fixing the Scrollbar in Calendly Embeds

Webflow + Bookings & Reservations

Fixing the Scrollbar in Calendly Embeds

No items found.

Calendly is a great booking platform, however the embed sometimes shows a scrollbar at certain breakpoint resolutions.

Overview

The problem with Calendly’s scrollbar is that it’s not appearing on the outer <div>, or even on the script-generated <iframe>. It’s appearing on the <body> element within the <iframe>- which you cannot affect with CSS or Script.

Solution

The best solution in Webflow is to size the outer <div> so that the <iframe> and its internal content won’t display a scrollbar unnecessarily- and when the scrollbar is needed, that it will give it a minimal appearance for mobile view.

Here’s how…

Create your HTML embed, and paste in your Calendly embed code.

Then…

OPTION #1: Brute-Force

Edit the embed code, so that inside of the _<div>'s style attribute, the height is 665px;

_{style="min-width:320px;height:665px"}

Save & Close your code window

OPTION #2: Breakpoint-aware

Edit the embed code, so that inside of the _<div>'s _style attribute, the height is 100%;

_{style="min-width:320px;height:100%"}

Save & Close your code window
Select the HTML Embed element in the designer
Select your desktop breakpoint at the top, and set the Height of the embed to 659px
Select your mobile-portrait breakpoint, and override that Height to 665px

Publish your site to staging, and test on your target devices.

Notes

The brute force approach will add 10 to 20px of space at the bottom in some breakpoints. Generally, it’s not that visible, depending on your Calendly widget and site background styling.
These numbers work for me on Aug 2022, if Calendly changes anything in their HTML content, those number might change, but the approach should still work.
Calendly’s CSS already applies a “touch” scrollbar effect, which is mobile friendly. You will see that scrollbar as a very thin line, and only when you are scrolled in the widget. Scrolling does appear to be needed if you have more than 2 booking options available.

For the techies

The CSS media breakpoints that Calendly is using in its CSS appears to be different from Webflow’s. Technically, you should be able to use descending breakpoints ( desktop → mobile ) of 646px, 659px, 646px, and 665px. However if you do that, and drag-resize your window on a desktop browser, the scrollbar will reappear between breakpoint transitions. The two-breakpoint approach is a bit sloppier with the extra 13px at the bottom on desktop, but solves that discrepancy. Visually, I don’t notice a difference.

More

https://discourse.webflow.com/t/webflow-calendly-remove-the-scrollbar/118652/4

‍

Table of Contents

Need help with your project?

Want to show your appreciation?

Did we just make your life better?

Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.