Material-ui: [Dialog] Using scroll=body breaks the fullScreen option

[Maher4Ever]

Hello, there is currently a bug preventing the creation of a responsive dialog that scrolls the entire dialog via the scroll='body' option. When this option is used, the dialog doesn't honor the fullScreen value and always opens the the normal mode.

• [x] This is a v1.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Even when scroll='body' is specified, the fullScreen is honored in the Dialog component.

Current Behavior

When the scroll='body' option is used, the dialog doesn't honor the fullScreen value and always opens in normal mode.

Steps to Reproduce

Link: https://stackblitz.com/edit/r4l7sr?file=demo.js

1. Click the shown button to open the dialog
2. You should see a non-fullscreen dialog although the fullScreen option is set to true.

Context

I'm trying to create a responsive dialog that scrolls the entire dialog on mobile devices because I have an text field in it and when the user clicks on the field the keyboard shows up and you suddenly have half the screen to work with. The DialogActions take around half of the remaining space and you end up with 25% of the entire device's screen to display content. Also, the DialogActions hide the content behind it including the text field the user is filling. By scrolling the entire dialog the DialogActions wouldn't overlay on top of the content.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.5.1 |
| React | v16.4.2 |
| Browser | Chrome |

[oliviertassinari]

@Maher4Ever Thanks for raising. It should be a matter of changing:
https://github.com/mui-org/material-ui/blob/cac28e7e74d43bd3fc5d32fc594cc99e0f63bbe8/packages/material-ui/src/Dialog/Dialog.js#L87-L94

Maybe something like:

  paperFullScreen: {
    margin: 0,
    width: '100%',
    maxWidth: '100%',
    height: '100%',
    maxHeight: 'none',
    borderRadius: 0,
+   '&$paperScrollBody': {
+     margin: 0,
+   },
  },

Do you want to give it a try?

[Maher4Ever]

Thanks for the quick reply. The suggested solution does indeed show the dialog in fullscreen mode but the scrolling is still limited to the paper. I think this is due to the fact that the user is actually scrolling the paper div instead of the whole dialog. I'm not sure if this is fixable.

[oliviertassinari]

I'm not sure if this is fixable.

@Maher4Ever Yes, it's just a matter of reverting the scroll body CSS when full screen.

[akaxiaok]

@Maher4Ever change the overflow-y of the DialogContent to visible may work