Material UI - Facing an issue that drop down options are coming below the modal window footer

Question

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.

Answer 1

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