Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

518
Vistas
How to make Material UI modal and dialog scrollable?

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?

7 months ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

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>
7 months ago · Juan Pablo Isaza Denunciar

0

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;
  
  

7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.