Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

268
Views
React - Enable background scrolling when Material UI Dialog is open

I've got a component that opens and closes a Material UI Dialog. At the moment, there is text that is displayed on the page followed by a button that simply opens the dialog. I've created a code sandbox to highlight where I am with this: https://codesandbox.io/s/formdialog-material-demo-forked-cgjgh?file=/demo.js:0-8775

When the dialog is open, is it possible to enable scrolling in the background (i.e. on the main page) so that the user can scroll through the text as an example? I've included the hideBackdrop prop to be true so that the backdrop is hidden, but I'm not sure how to to do it so the scrolling on the main page can be enabled.

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

Please disable overflow:hidden style property of body tag when opening dialog.

about 4 years ago · Juan Pablo Isaza Report

0

For me setting "disableScrollLock" property to true solved the problem. I found it under Material UI Modal documentation: https://mui.com/material-ui/api/modal/

<Dialog open={open} 
        onClose={handleClose} 
        hideBackdrop={true}
        disableScrollLock
  >

I tested it in your CodeSandbox example and it worked as it was supposed to. Hope this helps with your problem!

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!