Possibility to have the scrollbar disabled instead of hidden/removed

[adam-lynch]

The only reason why I wouldn't use this yet is because it's a bit jarring how the width of the page just. If the page's scrollbar was disabled instead of hidden/removed then it would be far easier to appreciate the nice animation from the bottom :)

[amsul]

Yeah, I guess this is a bit annoying for older versions of Windows and Macs that don't have floating scrollbars.

If it really bothers you, you can just remove the overflow:hidden styling on the body and all should be good!

Only caveat is that the page will be "scrollable" while the picker is open.

If you have an alternate way of disabling the scrolling, please do share :)

[adam-lynch]

Well, not just old versions; I'm on Chrome in Windows 8 (standalone desktop mode).

Yeah, I thought of the scrollability the second I read you say remove overflow:hidden. That wouldn't be nice either.

I'll look into it. I know that bootstrap-modal do it, probably with JS.

[adam-lynch]

It is possible with CSS.

See this fiddle I just created.

The CSS to the body be added when the modal is to be shown:

position: fixed !important;
overflow: scroll !important;
width: 100%;

The catch:

As you can see, it looks like the GitHub ribbon jumps. What's happening is that the body has a margin of 1em/16px which only becomes visible when it becomes fixed. It could be because of margin collapsing and the fact it occurs for statically positioned elements but not for absolutely positioned elements.

[adam-lynch]

Another solution would be still set to add overflow-x: scroll and or overflow-y: scroll for .pickadate__holder if the page's respective scrollbars were visible before opening the modal. (Still setting overflow:hidden to the body)

[amsul]

Oh, I actually think the second solution is perfect! I tried it out and seems to give the best cross-browser results. I'll adjust the styling accordingly. Thanks!

[adam-lynch]

Perfect, or almost perfect? :)
Any chance I could see an example?

[amsul]

Yeah, I haven't quite tested it out on IE yet.. But Firefox on Mac also has fixed sidebars and it seems alright with this: http://codepen.io/anon/full/uAvnK

Better than before for sure..

[adam-lynch]

Definitely better than before.

Still can do better though :). At least on Chrome on Windows XP, I see two scrollbars when the picker is shown;

Make sure to still have overflow: hidden in .pickadate__active. Then it's much better from what I can see. Just one scrollbar

There's only small catch now in that the new scrollbar is overlayed over the body but the last one was flush to the right of it. So the rightmost 16 pixels (for me anyway) of the page is hidden when the picker is opened. Which is fine for most pages since they've centered fixed/max width designs. Might be a good idea to test on a few differently styled pages

[amsul]

So I came back to this with v3, and the all round best solution seems to be to keep the double scrollbars. This avoids the page width from changing each time it opens.

There’s always the flexibility, for anyone who doesn’t want the double scrollbars, to add overflow:hidden to the body element onOpen.