Modal Scroll

G General May 25, 2022
Login to reply
Matt Sawka
2 years ago

yes, perfect. thank you!

Coded Themes Support Agent
2 years ago

Does it help?

Let me know if anything else is needed.



Amit Gorasiya
2 years ago

Hii Matt Sawka,

Follow below steps for make scrollable modal, if content overflows,

1. Replace attached file SimpleModal.tsx/.js at our project directory '../src/view/forms/plugins/Modal/'.


1. Open file SimpleModal.tsx/.js
2. If you want fix modal position then set below sx prop to <MainCard ...> component.

                position: 'absolute',
                width: { xs: 280, lg: 450 },
                top: '50% !important',
                left: '50% !important',
                transform: 'translate(-50%, -50%) !important'

3. For scroll modal if overflow content add below sx prop to <CardContent ..> component.
<CardContent sx={{ overflowY: 'auto', minHeight: 'auto', maxHeight: `calc(100vh - 200px)` }}>

If you still have any query, contact us

Matt Sawka
2 years ago


How do I make a modal scrollable if content overflows? For instance with <SimpleModal> how to make it scrollable?


Additional Info

Order#: [Order #41676] (April 12, 2022)

Purchase From?: [Order #41676] (April 12, 2022)

Name of Product/template: Berry