Menu
Hi I am using material ui and react select . I am facing an issue that my drop-drown options are showing below the modal window.
Here is the codesandbox link
I tried z-index and change the position value to absolute but did not get the success. Please help.
787
Set the outline: 'none' to your paper instead. That will fix your problem. Also, i think that you should be using <Dialog> instead, as recommended in docs. You will keep your behavior without that focus.
You just need to add fullScreen flag to modal component in order to achieve full screen. And if you don't want to use fullScreen, simply remove that fullScreen flag and don't need to use CSS here.
The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else. The component renders its children node in front of a backdrop component. The Modal offers important features: 💄 Manages modal stacking when one-at-a-time just isn't enough.
This happens because of overflow-y rule in two places: the dialog paper, and the dialog content. simply use material-ui styling to override this rules:
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
paperFullWidth: {
overflowY: 'visible'
},
dialogContentRoot: {
overflowY: 'visible'
}
});
And than apply this classes to your component:
const classes = useStyles();
...
<Dialog
...
fullWidth={true}
classes={{
paperFullWidth: classes.paperFullWidth
}}
>
...
<DialogContent
classes={{
root: classes.dialogContentRoot
}}
You can refer this CodeSandbox demo
166
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
