Material-UI: 1.0.0-alpha.19
React: 15.5.4
Browser: Chrome
In current implementation of Dialog component dialog content has next style MuiDialogContent-root-... and predefined style property overflow-y:auto
it cause issue when I use Select component from react-select
But without this property all work fine
Is it possible to fix it?
The overflow is here so we get a scrollbar when the content is too large. I think that it should be the default behavior. Regarding addressing that issue, here are some possible solutions that I would use:
DialogContent
to disable that scrolling handlingDialogContent
and use something home made insteadHow about Menu? In my opinion it will have the same behavior. Does it mean that I cannot use any component that have modal portal inside DialogContent ?
The Menu
is using the portal feature. No issue on that end.
I have a similar issue, but with the Paper inside the Dialog. It has this style applied:
overflowY: 'auto', // Fix IE11 issue, to remove at some point.
I was able to workaround by passing a className to PaperProps and duplicating the original styles and applying a overflow:visible
to the new class. But it'd be nice if we could control the overflow with a prop too.
The same here, this solve a problem:
const styles = theme => ({
dialogPaper: {
overflow: 'visible'
}
});
<Dialog
PaperProps={{
className: classes.dialogPaper
}}>
just adding to @michaell94 what worked for me. I had both a Dialog
and DialogContent
, so the following worked:
const styles = theme => ({ root: { overflow: 'visible' } });
<Dialog
classes={{
paperScrollPaper: classes.root
}}>
<DialogContent className={classes.root}>
not a good solution for dialogs with long forms
Thanks! Just adding to @nthgol . (I am on version 4.0.1) This worked for me but I had to remove EDIT: also be sure to remove scroll={"body"} from Dialog component!
just adding to @michaell94 what worked for me. I had both a
Dialog
andDialogContent
, so the following worked:
const styles = theme => ({ root: { overflow: 'visible' } });
<Dialog classes={{ paperScrollPaper: classes.root }}>
<DialogContent className={classes.root}>
That works! Thanks
Note that a better alternative to react-select is available at https://material-ui.com/components/autocomplete/.
Most helpful comment
just adding to @michaell94 what worked for me. I had both a
Dialog
andDialogContent
, so the following worked:const styles = theme => ({ root: { overflow: 'visible' } });
<Dialog classes={{ paperScrollPaper: classes.root }}>
<DialogContent className={classes.root}>