CODEWITHSUNDEEP
reactjsmodal-dialogmaterial-uiscrollbar
coddingtonjoel
coddingtonjoel

Reputation: 198

Stop Modal from shifting with scrollbar using Material-UI's "mui-fixed"

So I'm working on implementing a Material-UI modal, and ran into the issue where the appearance and disappearance of the scrollbar shifts the modal every single time it closes. I can fix this with the "mui-fixed" class, but it adds extra padding on the right side of the modal that looks bad.

I'm just generally curious if there's a better way to fix this problem with the scrollbar disappearing and reappearing, or if there's a way to accomplish this using "mui-fixed" without the padding on the right.

Setting the padding to 0 simply makes it act like the "mui-fixed" class wasn't included in the first place, which causes the scrollbar shift issue again.

This is the padding that doesn't look right on the side of my modal window when "mui-fixed" is added.

mui-fixed padding issue

Here's the modal WITHOUT the "mui-fixed" class.

Here's the modal WITH the "mui-fixed" class.

Upvotes: 0

Views: 2284

Answers (1)

coddingtonjoel
coddingtonjoel

Reputation: 198

Update-- I figured it out. The reason why this was occurring was because I had a custom scrollbar that was offsetting the modal. I just removed my ::webkit-scrollbar and ::webkit-scrollbar-thumb classes and everything works great now.

Upvotes: 1

Related Questions