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>

Any suggestions to how this issue can be resolved?

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>

Any suggestions to how this issue can be resolved?

• javascript
• css
• reactjs
• material-ui

• Can you provide more code so we can reproduce the issue – Zach Jensz Commented Mar 31, 2022 at 10:02
• There isn't really any code which I can provide. The content being rendered by <CreateSegmentModal> is getting cutoff no matter if its simple text or other ui ponents. The modal doesn't even show some of the top content. It just starts off from somewhere in-between and then only scrolls downwards. – Prateek Madan Commented Apr 1, 2022 at 6:59
• 1 I still think you should provide more code, I can't see the issue with what you have there. I suspect it will be a child element with a set height or something – Zach Jensz Commented Apr 1, 2022 at 7:19
• Check this out webknowledge99./2022/08/… I tested it and it works fine. – Ricardo Álvarez Commented Nov 16, 2022 at 3:22

2 Answers 2

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>

I ran into this issue with Material UI's Modal ponent as well. To add to other's ments 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} ponent="form" ... >
          ...
        </Box>
      </Modal>
    ...
  );
}

export default MyStubbornModal;