How to make Material UI modal and dialog scrollable?

user_17240474 0
Viewed 1373

I have a mui modal where a lot content is to be displayed. When I open the modal, the top content gets cut-off and I am unable to scroll up. I have already tried adding {overflow:"scroll"} property to the modal. However, it is't working. This is the code I am currently using:

  <Modal
    open={viewCreateSegmentModal}
    onClose={() => handleCreateSegmentModal(false)}
    sx={{ 
    overflow:'scroll',
    height:'100%'}}
  >
    <div style={{overflow:"scroll"}}>
      <CreateSegmentModal
        modalControl={(value) => handleCreateSegmentModal(value)}
      />
      </div>
  </Modal>

This is how the modal is getting displayed.

This is the top content getting cut-off. If I increase the number of rows under all conditions, the start getting cut-off too.

Any suggestions to how this issue can be resolved?

material-ui reactjs css javascript
2 Answers

Try putting your Modal content in a Box rather than a div, and putting the overflow: scroll on that - something like the below:

  <Modal
    open={viewCreateSegmentModal}
    onClose={() => handleCreateSegmentModal(false)}
  >
        <Box className="modalBox" sx={{position: "absolute", overflowY: "scroll", maxHeight: "90%"}}>

         <CreateSegmentModal
           modalControl={(value) => handleCreateSegmentModal(value)}
         />
      </Box>
  </Modal>
user_127111330

I ran into this issue with Material UI's Modal component as well. To add to other's comments I did this below and it does the trick. Note: I also have a styles-in-js set up to display the modal in the center of the window. Using MUI 5.8.x w/ React. As Below:

...
import { Modal, Box, ... } from '@mui/material';
...


...
const formStyle = {
    // These 4 below are positionings I used for larger 
    // height viewports - centered
    position: 'absolute', 
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    // other styles...
    width: '52%',
    maxWidth: '600px',
    minWidth: '270px',
    boxShadow: 24,
    py: 4,
    borderRadius: 3,
    zIndex: 100,
    // media query @ the max height you want (my case is the 
    // height of the viewport before the cutoff phenomenon) - 
    // set the top to '0' and translate the previous 'y' 
    // positioning coordinate so the top of the modal is @ the 
    // top of the viewport
    '@media(max-height: 890px)': {
        top: '0',
        transform: 'translate(-50%, 0%)'
    }
};


const MyStubbornModal = () => {
  ...
  return (
    ...
      // set the modal overflowY to scroll
      <Modal sx={{overflowY: 'scroll'}} disableScrollLock={false} ... >
        // I have an inner div (MUI Box), designated as a 'form' 
        // that is assigned the style above
        <Box sx={formStyle} component="form" ... >
          ...
        </Box>
      </Modal>
    ...
  );
}

export default MyStubbornModal;

user_118818970
Related