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
FAQs
Answers to frequently asked questions.
