# Dynamically Positioned Dropdown List

**URL:** <https://community.weweb.io/t/dynamically-positioned-dropdown-list/19530>\
**Category:** How do I?\
**Created:** [August 5, 2025, 2:17am UTC](https://community.weweb.io/t/dynamically-positioned-dropdown-list/19530 "2025-08-05T02:17:27Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Msanders4](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/msanders4/32/13284_2.png) [@Msanders4](https://community.weweb.io/u/Msanders4)\
**Post date:** [August 5, 2025, 2:17am UTC](https://community.weweb.io/t/dynamically-positioned-dropdown-list/19530/1 "2025-08-05T02:17:27Z")

</div>

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:

```auto
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](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/9762701fb15a50338dbb35869b0ff7c98ff0ba67.png)

---

<div class="post-metadata">

**Author:** ![sam1](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/sam1/32/6724_2.png) [@sam1](https://community.weweb.io/u/sam1)\
**Post date:** [August 5, 2025, 3:34am UTC](https://community.weweb.io/t/dynamically-positioned-dropdown-list/19530/2 "2025-08-05T03:34:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Msanders4](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/msanders4/32/13284_2.png) [@Msanders4](https://community.weweb.io/u/Msanders4)\
**Post date:** [August 5, 2025, 2:51pm UTC](https://community.weweb.io/t/dynamically-positioned-dropdown-list/19530/3 "2025-08-05T14:51:40Z")

</div>

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