React-dates: appendToBody and page scrolling

Created on 13 Sep 2018  路  2Comments  路  Source: airbnb/react-dates

when setting appendToBody,
it sets overflow-y: hidden; inline-style to both html, and body tags
it prevents scrolling of the page when the date picker is open,
removing both inline-styles keeps the modal in the right position and now you can scroll the page,
can you change the inline-style of overflow-y: hidden; to a class? so we can override it,
(I'm not sure what the purpose of it)

Most helpful comment

There is a disableScroll property which you can set to false and it should stop adding overflow-y: hidden. However it does not appear to work, and even in the storybook demo it only works on the SingleDatePicker and it doesn't work on the DateRangePicker. Even weirder on the DateRangePicker storybook they are using a property called preventScroll which doesn't appear anywhere else in the documentation (and it doesn't work in the demo). Bleh.

All 2 comments

This is frustrating. I do think I know the purpose though, which is that if you scroll the page while date-picker is open, it remains fixed to the page rather than scrolling with the content (just try unchecking overflow-y: hidden in devtools to see).

There is a disableScroll property which you can set to false and it should stop adding overflow-y: hidden. However it does not appear to work, and even in the storybook demo it only works on the SingleDatePicker and it doesn't work on the DateRangePicker. Even weirder on the DateRangePicker storybook they are using a property called preventScroll which doesn't appear anywhere else in the documentation (and it doesn't work in the demo). Bleh.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

nkint picture nkint  路  21Comments

thinhdd88 picture thinhdd88  路  22Comments

rodryquintero picture rodryquintero  路  70Comments

aaronjensen picture aaronjensen  路  52Comments

kakadiadarpan picture kakadiadarpan  路  22Comments