0
953
VistasHow 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>
Any suggestions to how this issue can be resolved?
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
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>
·
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;
·
Juan Pablo Isaza
Denunciar
Responde la pregunta