Dynamically Positioned Dropdown List

Ask us anything How do I?
1

I’m running into a UI issue with both Select and Dropdown elements. Whenever the element sits near the bottom of a page or modal, the options list opens downward and disappears off-screen. (See the attached screenshot – the red circle shows the menu getting cut off.)

What I’ve tried so far

  1. Offset formulas – I wrote a Y-offset formula that checks the element’s Y position against Screen.pageSize.height and flips the list upward when space is tight:
if (   Screen.pageSize.height - Position_of_split-remainder-dropdown-y < 200 ) {   Screen.pageSize.height - Position_of_split-remainder-dropdown-y - 250 } else {   1 }

This works on that single dropdown, but I’d have to repeat (and maintain) a custom formula for potentially thousands of dropdowns across the Transactions screen, which isn’t scalable.

  1. Exploring props – I looked through every panel for a “portal mode,” “placement,” or “auto” setting (similar to what react-select offers), but nothing like that appears anywhere (this was recommended to me by ChatGPT and Gemini).

  2. Swapping elements – I tested both the Select component and the standalone Dropdown element. Same behaviour for both.

What I’m hoping for

  • A built-in setting or best-practice pattern that makes dropdowns automatically flip upward (or otherwise stay fully visible) when there isn’t enough space below.

  • Alternatively, a global way to apply a single formula or JS hook so I don’t have to paste an Offset rule on every instance.

Has anyone solved this elegantly? I’d love any pointers, hidden settings, or example projects you can share.

Thanks in advance!

image
image1331×398 45.5 KB

2

I have run into this issue as well and what’s frustrating is that in popups the user can’t even scroll the popup while the select is open. I opened a ticket for this and was told after a discussion that it was intended behavior that you can’t scroll the popup while a select is open yet you can scroll a page while the select is open.

I think forking the component and adding the flip upwards is a good option if your confident doing that.

3

That’s interesting. I didn’t know that you could scroll the page while the select element is open in a pop-up. I’m now wondering if I can resolve this issue by making all popups have a bottom margin of X pixels and then the maximum height of the and select drop downs equal to that same X pixels