[Dialog] with scrollable content cut off on mobile

[ulrichSchreiner]

hi,

i have a dialog with autoScrollBodyContent={true} and it works on a desktop. but when opening the dialog on a mobile device (nexus6), the scrollbar is not on the right edge of the dialog it is about 1cm inside the dialog. when using the chrome-inspector you can simulate this behaviour with other small devices too (iphone, etc).

when removing the style

box-shadow: 0 14px 45px rgba(0, 0, 0, 0.25), 0 10px 18px rgba(0, 0, 0, 0.22); 

with the inspector, the scrollbar appears exactly on the right side of the dialog. but the shadow disappears :-(

/usc

[chungwong]

To be more precise, by adding a overflow-y: auto to the same element you mentioned will fix the problem

EDIT: oh my my, it is actually a Paper element with zDepth=4, guess https://github.com/callemall/material-ui/blob/v0.14.4/src/dialog.jsx#L218 is where things should be happening

[chungwong]

Hi Nathan, why is this simply closed? Is it resolved in v0.15?

[nathanmarks]

Hey @chungwong,

Sorry, I mistook this for another dialog issue that was a dupe of another.

[nathanmarks]

@chungwong Although, the material design spec calls for full screen dialogs on mobile.

[chungwong]

@nathanmarks , I believe there is something wrong here.

It is not related to the spec at all, it is the position of the scroll bar(see attached). And it is really is a bug(or conflict) caused by the Paper element.

[nathanmarks]

@chungwong Got it. Thanks for the screenshot dude!

[luandro]

The Dialog is pretty much unusable on mobile if the keyboard needs to be brought up. No way to fix this?

[jamespizzurro]

This is still an issue as of v0.15.2. @chungwong's temporary fix works for now though.

[zetos]

I am running into the same problem as the screenshot of @chungwong posted. The scroll bar is wrong placed, even on the material-ui docs. I dont see the same bug using Firefox though..

[oliviertassinari]

I'm closing as a duplicate of #7438