Do the pop up elements (e.g. Dropdown Menu, Popover) factor in position relative to bottom of viewport?

[denno020]

Doing a quick test on the homepage of Radix, it appears that when the dropdown menu is placed at the bottom of the viewport, it doesn't account for that fact when displaying, and displays its contents out of view:

RadixUI.Popup.elements.webm

I'm not sure if this happened because I just hacked the home page (adding a bunch of margin to an element above these components so they get pushed down), or if the components aren't viewport aware?

The obvious issues with this is usability, especially on mobile.

Further to this, is appears that the pop up elements own't adjust the height of the viewport, so if a developer uses one of them near the bottom of a viewport, a user will never be able to see the options:

RadixUI.Popup.elements.viewport.height.webm

Being viewport aware, and displaying the popup above the button would fix the issue. Similar to how base HTML select elements work.

[benoitgrelard]

Hi @denno020,

They do take all of this into account.
However, the demos displayed on the front page turn this off (with avoidCollisions={false}) as we just want to demo what these components can look like.

If you want to play with this behaviour, I recommend you play with the demos on the page of each component instead, for example:
https://www.radix-ui.com/docs/primitives/components/dropdown-menu

You can open each example in codesandbox too to play around with them further.

✌️

[denno020]

Brilliant, works perfectly! Thanks for the link, I look forward to using this in projects in the future!

Edit: I'm not sure how to close this discussion out.. Please feel free to update as necessary

[benoitgrelard]

Brilliant. Discussions just stay open unless we delete them, so we generally keep them as is for posterity 😀