Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Select] Add an option to not lock the body scrollbar

See original GitHub issue
  • I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

To not hide overflow of body & make things shift when scrollbar disappears.

Current Behavior

Hides overflow of body.

Steps to Reproduce (for bugs)

  1. Have content within <body> tag that causes it to overflow or <body> has style of overflow: visible
  2. Open select drop down

Context

It messes with styling that relies on body having overflow content. Below is a sample of what’s happening on the demo site. Notice the scroll bar vanishing as soon as the menu pops up.

mui-select-bug

Your Environment

Tech Version
Material-UI v1.0.0-beta.24
React v16.2.0
browser 61.0.3163.79

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:2
  • Comments:10 (3 by maintainers)

github_iconTop GitHub Comments

16reactions
Eplumecocqcommented, Nov 13, 2019

@brianperera You should use the MenuProps props like so :

<Select
   MenuProps={{
     disableScrollLock: true
   }}
/>
2reactions
thakuranujsinghcommented, Aug 22, 2019

I am facing the same issue in the latest version of Material ui

Read more comments on GitHub >

github_iconTop Results From Across the Web

[Select] Add an option to not lock the body scrollbar #9595
I have searched the issues of this repository and believe that this is not a duplicate. Expected Behavior To not hide overflow of...
Read more >
Hide vertical scrollbar in <select> element - Stack Overflow
11 Answers​​ It hides the scrollbar in the case that you don't need it without hiding possible extra option elements in the other...
Read more >
body-scroll-lock - npm
Enables body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrolling of a target element ...
Read more >
How To Hide Scrollbars With CSS - W3Schools
Learn how to hide scrollbars with CSS. How To Hide Scrollbars. Add overflow: hidden; to hide both the horizontal and vertical scrollbar. Example....
Read more >
Hide or display scroll bars in a workbook - Microsoft Support
Hide or display scroll bars in a workbook · Click the File tab. · Click Options, and then click the Advanced category. ·...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Programmatically focus a Select

Next page

[next] Tooltips breaks line on spaces on a container with position: 'absolute'