0
944
Views¿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> 
¿Alguna sugerencia sobre cómo se puede resolver este problema?
2 answers
Answer question0
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>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;