fix: resolve floating MUI dropdown on scroll by correcting html overflow property#7478
fix: resolve floating MUI dropdown on scroll by correcting html overflow property#7478YASHMAHAKAL wants to merge 1 commit intolayer5io:masterfrom
Conversation
|
🚀 Preview for commit 403d744 at: https://69b051260346db73e024c9b7--layer5.netlify.app |
YASHMAHAKAL
force-pushed
the
fix-floating-dropdown
branch
2 times, most recently
from
fc25462 to
7c348a1
Compare
|
🚀 Preview for commit 7c348a1 at: https://69b05bd833b7968e41f17338--layer5.netlify.app |
|
🚀 Preview for commit b8b17f2 at: https://69b0754194a91706bdcef16b--layer5.netlify.app |
|
We have floating dropdowns on the homepage? |
|
With this change how are mobile views supposed to handle overflowing content? |
I see now that we don't; that the PR description is inaccurate. |
|
@leecalcote mine previous changes were incorrect, i haven't updated pr description, i will update it once i'm done. apologies for confusion : ) the problem is when we open any dropdown and scroll page the dropdown persists on whole page. |
|
🚀 Preview for commit 92494ab at: https://69b16b09d79dc320caa9df7b--layer5.netlify.app |
|
🚀 Preview for commit 39c6bdf at: https://69b174bdd79dc34fa5a9ddea--layer5.netlify.app |
|
@saurabhraghuvanshii i have enforced scroll-lock when dropdown is opened, lock is disabled when we close dropdown. is this expected behaviour or do we need scroll even when dropdown is open ? |
YASHMAHAKAL
force-pushed
the
fix-floating-dropdown
branch
from
39c6bdf to
073fd93
Compare
src/sections/app.style.js
Outdated
| Because body has overflow:clip, <html> is the actual scroll container. This rule | ||
| synchronizes the lock — when MUI locks body, we also lock html to prevent scrolling. */ | ||
| html:has(body[style*="overflow: hidden"]) { | ||
| overflow: hidden !important; |
There was a problem hiding this comment.
@YASHMAHAKAL we don't prefer !important usually. try diff method.
|
🚀 Preview for commit 073fd93 at: https://69b180241d9a1c18c4f6c92b--layer5.netlify.app |
Signed-off-by: YASHMAHAKAL <yvsst01@gmail.com>
YASHMAHAKAL
force-pushed
the
fix-floating-dropdown
branch
from
073fd93 to
4ad58fc
Compare
| html:has(body[style*="overflow: hidden"]) { | ||
| overflow: hidden; |
| background-color: ${(props) => props.theme.shadowDarkColor}!important; | ||
| color: ${(props) => props.theme.text}; |
There was a problem hiding this comment.
however search box is also having !important, i have confirmed it's in master also
|
🚀 Preview for commit 4ad58fc at: https://69b19e4d8d3435403fdd6477--layer5.netlify.app |
|
YASHMAHAKAL, when I open the dropdown, I’m unable to scroll the page down. |
@saurabhraghuvanshii yes, it wont as i said earlier, you need to either select or close the dropdown to scroll.. should i configure it otherwise ? |
|
My bad, I missed that comment. Sorry. Yes, we need the user to be able to scroll the page; only the dropdown should stay fixed. |
|
@saurabhraghuvanshii alright |
4 participants
Description
This PR fixes an issue where Material UI (MUI) Select dropdowns "float" and detach from their anchor element when the page is scrolled.
Signed commits