Topic: Modal open on scrollable first site makes 2nd site unscrollable
Expected behavior
Page1 is scrollable, open Modal, click on button wrapped in a Link, close modal, link to Page2, Page2 is scrollable too.
Actual behavior
Page1 is scrollable, open Modal, click on button wrapped in a Link, close modal, link to Page2, Page2 is NOT scrollable.
Resources (screenshots, code snippets etc.)
https://github.com/txmazing/MDBModalissue2
Hi!
Thanks for reporting that bug. It seems that the CSS property overflow: hidden is not removed when a page changes. You can use a workaround to avoid it now (see code below), but we will correct it in our package too :)
Page2.js
/* Bootstrap */
import { useEffect } from "react";
import { MDBCol, MDBContainer, MDBRow } from "mdb-react-ui-kit";
/* Code */
export default function Page2() {
useEffect(() => {
document.body.style.overflow = "auto";
}, []);
return (
<MDBContainer fluid className="bg-primary pb-2">
<MDBContainer style={{ paddingTop: "75px" }}>
<MDBRow className="vh-100">
<MDBCol>
<h1 className="font-weight-bold py-3 text-white">Page2</h1>
</MDBCol>
</MDBRow>
</MDBContainer>
</MDBContainer>
);
}
Keep coding!
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: MDB5 2.3.0
- Device: PC
- Browser: Chrome
- OS: Chrome 97.0.4692.99 Win11
- Provided sample code: No
- Provided link: Yes