Encontré un problema al desplazar la ventana modal. Comencemos por el principio: el sitio tiene un botón para filtros. La ventana de filtros está diseñada como una ventana modal. Contiene 4 elementos con los que puedes filtrar (en mi código son FilterMethod, FilterStatusCode, FilterLink, FilterDate).

Sin embargo, estos cuatro elementos tienen la forma de una lista desplegable. Cuando estos elementos están en estado cerrado, no hay problema. Pero cuando está en estado abierto, hay problemas: la ventana modal sale de la pantalla; no se desplaza.

He intentado de muchas maneras, pero no he podido encontrar una solución a mi problema. Me gustaría que si cuando las listas desplegables están abiertas, la ventana modal ocupa más del 80% de la altura de la pantalla, entonces comenzará a desplazarse. Por favor, dime si esto se puede hacer.

 const style = { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: 300, bgcolor: 'background.paper', border: '1px solid #000', boxShadow: 24, p: 4, }; export default function ModalWindow() { const [open, setOpen] = React.useState(false); const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); return ( <div> <Button onClick={handleOpen}><FilterAltIcon/></Button> <Modal open={open} onClose={handleClose} > <Box sx={style}> <Typography id="modal-modal-title" variant="h6" component="h2"> Filters </Typography> <Typography sx={{mt: 1}}> <FilterMethod></FilterMethod> </Typography> <Typography sx={{mt: 1}}> <FilterStatusCode></FilterStatusCode> </Typography> <Typography sx={{mt: 1}}> <FilterLink></FilterLink> </Typography> <Typography sx={{mt: 1}}> <FilterDate></FilterDate> </Typography> <Typography sx={{mt: 1}}> <ApplyCancelButtons></ApplyCancelButtons> </Typography> </Box> </Modal> </div> ); }