Fix long list output in Dropdown #535
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| @@ -12,6 +12,7 @@ export const Dropdown = (props: DropdownMenu.DropdownMenuProps) => ( | |||
| const DropdownMenuItem = styled(GenericMenuItem)` | |||
| position: relative; | |||
| display: flex; | |||
| min-height: 32px; | |||
There was a problem hiding this comment.
Why are we adding min-height here?
There was a problem hiding this comment.
@vineethasok I found that just adding overflow-y: auto on the parent container was not enough to maintain the expected height of the Dropdown.Item elements.
I think it might be because there is a max expected height of the parent container and the height of this child component is calculated based on that; the more children, the less their height to fit inside the parent
| @@ -93,6 +94,7 @@ const DropdownMenuContent = styled(GenericMenuPanel)` | |||
| min-width: ${({ theme }) => theme.click.genericMenu.item.size.minWidth}; | |||
There was a problem hiding this comment.
@natalyjazzviolin Maybe we can also add maxHeight as a prop which can be provided by the user
@gjones Would love your thoughts
|
natalyjazzviolin
force-pushed
the
nataly/fix-dropdown-overflow
branch
from
a5d9410 to
ce031b2
Compare
|
| @@ -93,6 +94,10 @@ const DropdownMenuContent = styled(GenericMenuPanel)` | |||
| min-width: ${({ theme }) => theme.click.genericMenu.item.size.minWidth}; | |||
| flex-direction: column; | |||
| z-index: 1; | |||
| overflow-y: scroll; | |||
| max-height: calc( | |||
| (var(--radix-${({ $type }) => $type}-content-available-height) - 100px) | |||
There was a problem hiding this comment.
Out of curiosity, what does 100px represent?
There was a problem hiding this comment.
@hoorayimhelping this subtracts 100px from the available height so the bottom of the dropdown doesn't get too close to the bottom of the screen per Daniel's request
Closes #533
Why
Currently lists over 15+ items in the Dropdown component do not display correctly:
What
This adds
overflow-y: autoto theDropdown.Contentcomponent to allow for scrolling and setsmin-height: 32pxon theDropdown.Itemto make sure it does not get compressed to less than the expected height. I got the32pxfrom the computed height of otherDropdown.ItemsI looked at.Screen.Recording.2025-01-29.at.4.54.24.PM.mov