• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

742
Vistas
¿Cómo hacer que la interfaz de usuario del material sea modal y el cuadro de diálogo se pueda desplazar?

Tengo un modal mui donde se mostrará mucho contenido. Cuando abro el modal, el contenido superior se corta y no puedo desplazarme hacia arriba. Ya intenté agregar la propiedad {overflow:"scroll"} al modal. Sin embargo, no está funcionando. Este es el código que estoy usando actualmente:

 <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.

¿Alguna sugerencia sobre cómo se puede resolver este problema?

almost 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

Intente poner su contenido modal en un cuadro en lugar de un div, y coloque el desbordamiento: desplácese por eso, algo como lo siguiente:

 <Modal open={viewCreateSegmentModal} onClose={() => handleCreateSegmentModal(false)} > <Box className="modalBox" sx={{position: "absolute", overflowY: "scroll", maxHeight: "90%"}}> <CreateSegmentModal modalControl={(value) => handleCreateSegmentModal(value)} /> </Box> </Modal>
almost 3 years ago · Juan Pablo Isaza Denunciar

0

También me encontré con este problema con el componente Modal de Material UI. Para agregar a los comentarios de otros, hice esto a continuación y funciona. Nota: También tengo una configuración de estilos en js para mostrar el modal en el centro de la ventana. Usando MUI 5.8.xw/ React. Como a continuación:

 ... 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;

almost 3 years 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 vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda