fix: resolve floating MUI dropdown on scroll by correcting html overflow property#7478
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 |
YASHMAHAKAL
force-pushed
the
fix-floating-dropdown
branch
from
073fd93 to
4ad58fc
Compare
src/sections/app.style.js
Outdated
| html:has(body[style*="overflow: hidden"]) { | ||
| overflow: hidden; |
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 |
Signed-off-by: YASHMAHAKAL <yvsst01@gmail.com>
Signed-off-by: YASHMAHAKAL <yvsst01@gmail.com>
YASHMAHAKAL
force-pushed
the
fix-floating-dropdown
branch
from
4ad58fc to
be08147
Compare
|
🚀 Preview for commit be08147 at: https://69b5962a7678236bcef42ac0--layer5.netlify.app |
|
@saurabhraghuvanshii now dropdowns are attached to the anchor and doesn't floats all over the page when scrolling and also scroll lock is disabled while dropdown is opened, let me know if further iterations required : ) |
Signed-off-by: YASHMAHAKAL <yvsst01@gmail.com>
|
🚀 Preview for commit e8d428c at: https://69b5ac5b55d43c699769b06d--layer5.netlify.app |
|
THanks @YASHMAHAKAL |
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