iFrame's creating a scrollbar

Completed

Comments

8 comments

  • Official comment
    Avatar
    Hannah McIntosh

    Hello all,

    Happy to let you know that we have released a fix for this issue. If you need further support, feel free to reach out to support@calendly.com.

    Thanks,

    Hannah at Calendly

    Comment actions Permalink
  • Avatar
    David Kedron

    Did you end up figuring a solution out for this?  I see it's still an issue 7 months later.  Not looking forward to manually hacking their internal CSS...

    3
    Comment actions Permalink
  • Avatar
    Allen Hancock

    agreed, and duplicated here (with a fix I think?)

    https://help.calendly.com/hc/en-us/community/posts/115004353373-Fix-for-broken-scroll-navigation-when-Calendly-external-css-is-added

    It'd be great to hear from Calendly support on this.

    0
    Comment actions Permalink
  • Avatar
    David Hunter

    Scroll problem here as well.

    While we can make it so that the iFrame doesn’t scroll, the problem is that in order to remove the scroll completely (using the scrolling attribute of an iFrame) it removes further functionality. In order to remove the scroll, you have to set the iFrame to never scroll, which makes you either have to have an incredibly long iFrame embed (which looks bad because of a ton of whitespace) to show all available dates on a day that has a lot of openings, or (if you don’t make the iFrame longer) the dates get cut off by the bottom of the iFrame.

    The main problem is the CSS that is used on the Calendly page.

    https://calendly.com/davidhuntererie

    Just going to it in a browser, no matter the window size, will always have a scroll.

    Even if going to the iFrame URL, you will see the scroll bar: 

    https://calendly.com/davidhuntererie?embed_domain=https%3A%2F%2Fwww.epicwebstudios.com&embed_type=Inline 

    The “header” class is incorrectly styled (relative to its parent elements). It has a margin set to “30px 20px” which is what causes a scroll no matter the size of the window. If .header was set to “margin: 0 20px 30px 20px;” and added “padding-top: 30px;” you get the exact same look without any scrolling unless the page needs it. This is where the issue lies.

    If Calendly fixed this, iFrames could be sized to present the initial view all in one area with no scroll, and if needed, the following views/steps could scroll if the content expands longer than the iFrame is defined height wise.

    Not a dealbreaker though, Calendly is still really sweet.

    1
    Comment actions Permalink
  • Avatar
    Meow Media

    can there be an option to have the scroll off if you are only booking for short periods of time? And you can go left to right anyway so for me is unneeded.

     

    0
    Comment actions Permalink
  • Avatar
    Ben Gill

    Did anyone fix this? I'm having the same issue.

    3
    Comment actions Permalink
  • Avatar
    Tara Murphy, Tr3Dent

    Same issue here

    1
    Comment actions Permalink
  • Avatar
    Chasechappell.com

    Are there still no solutions to this yet?...

     

    0
    Comment actions Permalink

Please sign in to leave a comment.