Body Scrollable Dialog

[everythingspirals]

Problem description

How can I make the Dialog scrollable in v1. I have a modal with a list in it, and the list goes off the page. I would like the ability to scroll down. I would like the scrollbar to be on the main browser window, rather than on the modal itself.

Link to minimal working code that reproduces the issue

Versions

• Material-UI: 1
• React:
• Browser:

[oliviertassinari]

That's an interesting issue! That behavior can be very handy when dealing with small height screen on mobile. Yes, it would be great to have this feature.

[quiaro]

@everythingspirals I'm going to have a look at this. Let me know if you're already working on a fix for it.

[quiaro]

Why not use a full screen dialog instead? It seems to work fine (except for a bug in the app bar)

[brammitch]

I'm using Dialogs with lists varying from 5-100 items, and initially had the same problem you did. Here's the configuration that allowed me to keep the Dialog and its list from going off the page:

<Dialog
	title="List of Things"
	actions={actions}
	modal={true}
	open={this.props.dialogOpen}
	autoDetectWindowHeight={true}
	autoScrollBodyContent={true}
	repositionOnUpdate={true}
	contentStyle={
		width: '90%',
		height: '90%'
	}
>
	<ListOfThings />
</Dialog>

The only difference from your request is that the scrollbar is in the modal, not the underlying page.

[dlcoffee]

I created an issue (#10656) that's similar to this. After browsing the other issues, I'm still not sure if this has solved or merged in yet. It seems like a lot of the solutions are focused on using a full screen on mobile. Ideally I'd like to be able to use a body-scrollable Dialog that works on all screens.

I guess one option is to use the full screen Dialog on the v1 branch but I don't really want to have the full screen on large screens.

[n-sviridenko]

We are also interested in this feature (for desktop resolutions). Customer may not understand that dialog has a scroll (some browsers hide the scroll when there is no action) and hidden part will never appear. If the customer will scroll the window instead, the dialog's bottom part will be hidden behind the viewport so that it will be more obvious.