Topic: Modal is preventing page from scrolling
Expected behavior React page is large and should scroll to see all the page. When the modal is not showing. Actual behavior Once once I add the modal code the page stops scrolling whether the modal is showing or not. The rest of the page can't be seen, only the top of the page. Once I comment out the modal tags the page scrolls again. Resources (screenshots, code snippets etc.)
Hi there,
how can we reproduce the problem? Please share with us a working example.
Best, Ania
clintse commented 6 years ago
Thank you for your prompt response. I went back to the getting started and found that on that branch of my repo I didn't have the imports on my index.js Totally on me. Thanks!
Anna Morawska staff commented 6 years ago
Ok, good to hear that :) Happy coding
Since the staff here are unable to ever get to questions, I will help you. Mind you that I downloaded this 3 days ago and seem to know more than the staff. Their modal logic is crap. They add a class named 'modal-open' or 'open-modal', I cant remember which, to the body when the modal mounts. This is "meant" to prevent scrolling when the modal is open. But they have not figured out how to use react well enough to know that this will prevent scrolling all the time. They SHOULD have added it to the body when the modal opens.
SOLUTION: figure out what class they add to the body. Add this in the css: .modal-open { overflow-y: scroll }
This will allow you to scroll again. I am going to add my own logic to the modal to prevent scrolling when the modal opens like how it should have been originally.
They also have other errors. The tooltip doesn't work at all. I am sure I will find more.
Good luck dealing with these people...
purtzerb commented 6 years ago
I am irritated, so I apologize if I come off crass. But you guys made a great product, then ruined it with these stupid little errors that would take a minute to fix.
The tooltip throwing an error is also one of the most annoying things in the world. I literally copy and pasted from your example....
Anna Morawska staff commented 6 years ago
Hi @purtzerb - sorry for the inconvenience, I understand your frustration - our team is trying to reproduce and solve the problem with the tooltip
Hi there,
regarding the scrolling problem - thank you @purtzerb for pointing out that the .modal-open class is not removed after closing the modal - I've already added it to our TODO list - but it is not a cause of the problem. Please check out our demo as a reference
https://react.mdbootstrap.com/modals/modal
- the scroll works fine there.
@clintse please share with us your code
Your modal examples do not prevent scrolling as is the desired behavior. You probably just have modal-open: {overflow-y: scroll} defined in your app.css. This is a workaround that deviates from desired behavior. Your class of modal-open is still on your body tag. It just serves no purpose currently.
I was irritated yesterday, so I apologize again for my sarcastic comment lol I realize you guys have alot on your plate.
Anna Morawska staff commented 6 years ago
Yes, it should be removed after the modal is closed, certainly, it is a bug. We will take care of it :)
purtzerb commented 6 years ago
Thank you :) I apologize for my quippy comments when I was on my tirade lol I was pretty stressed with work and this is for my capstone, so I was frantic lol But thats never an excuse to be rude, so I apologize.
Have a wonderful day!
I am still seeing this issue. The modal-open class is not removed from the body tag after closing the modal. I am using React version
Aliaksandr Andrasiuk staff commented 6 years ago
It's not fixed yet.
We will try to fix this before our upcoming release.
Best regards.
Is this bug fixed in the current release? Didn't find it in release history and I have the same issue.
Konrad Stępień staff commented 5 years ago
Hi @Tingyeu Yang,
The latest package has a bug fix.
But please check it and tell me if you still have a problem.
Best regards, Konrad.
So in spite of the bug fix Konrad mentioned two months ago, it looks like this is still occurring as I installed the latest version using NPM today for the first time.
Per Anna's question for clintse, the code I'm using is exactly what's in the MDB documentation, verbatim except for a couple of name changes because I was plugging it into an existing app.
The result was a functional modal (to MDB's credit since every other modal node module was giving me endless grief, including reactstrap) but without the ability to scroll the page. There's definitely still something like overflow: hidden in the CSS affecting body whether or not the modal is active.
After fooling around a bit and trying purtzerb's suggestion (which wouldn't affect body anyway), I tried the most brick-to-the-face obvious thing I could think of, and it worked.
In your custom CSS (assuming you have a custom style sheet – you can import a custom style sheet using something like import './assets/css/custom.css' just like you did to import mdbreact) just add:
body {
overflow-y: scroll !important;
}
Works like a charm. I was afraid it might stop the modal from scrolling when the modal is active, but it doesn't. The modal scrolls when it is active, the body scrolls when the modal is inactive.
If your body length is too short to scroll on larger screens but long enough to scroll on smaller screens, you could probably use auto instead of scroll.
Maryann Cummings commented 5 years ago
One note, for some reason this does add a second scrollbar when the modal is active in Chrome for desktop on MacOS. ‾|_(ツ)_|‾
Konrad Stępień staff commented 5 years ago
Very thanks for your answer. We will try to fix it in the near feature. Also, thank you for your suggestions.
If there is anything else I could do for you do not hesitate to ask me. I'll be happy to help you. :) Best Regards, Konrad
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.11.1
- Device: hp laptop
- Browser: Chrome
- OS: windows 10
- Provided sample code: No
- Provided link: No