Modal open on scrollable first site makes 2nd site unscrolla


Topic: Modal open on scrollable first site makes 2nd site unscrollable

drimaco asked 3 years ago

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


Krzysztof Wilk staff answered 3 years ago

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!


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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
Tags