Large height overflowing through the top of the screen

[gustavopch]

Hey.

I found that when the content of the bottom sheet is too large it overflows through the top of the screen. I think it would be nice if it became scrollable in this situation.

This would solve:

body:{
    overflow: isOpen ? 'auto' : 'hidden',
    maxHeight: '100vh',
    backgroundColor: 'white',
    ...this.props.bodyStyle
}

There's only a caveat with Chrome for Android. When visible, the address bar covers part of the 100vh space.

[gustavopch]

I think the following solution accounts for the caveat I talked about in the last post:

body:{
    overflow: isOpen ? 'auto' : 'hidden',
    maxHeight: window.innerHeight,
    backgroundColor: 'white',
    ...this.props.bodyStyle
}

Not sure how this could impact the rendering performance, but it's working fine in my Moto G 2nd generation.

[manufont]

I added the property 'scrollOnWindowOverflow' which should do the trick.

[gustavopch]

Awesome!

@manufont I found one more thing. When the main page already has a scrollbar, the bottom sheet gets a second one. As the bottom sheet is covering the whole screen, no interaction with the main page is expected and therefore it shouldn't be scrollable in this situation.