Dropdown Position Issue on iOS

Need help Responsiveness
1

Hi everyone,

I’m experiencing a layout issue on my Bubble app when using a dropdown field on iOS devices. When the dropdown is activated, it displays too high on the screen, overlapping the top area and making it difficult to see the choices clearly (see screenshot attached). This happens especially when the keyboard is open, and the dropdown doesn’t seem to adjust its position properly.

Has anyone seen this problem before or have suggestions for how to fix the dropdown so it appears closer to the input field, even when the keyboard is visible on iOS?

Thanks in advance for your help!

2

image
image704×1390 114 KB

3

How is this dropdown constructed? Is it a focus group or something? Doesn’t look like the default bubble dropdown element. And is this a webapp viewed on mobile or the new mobile app creator?

4

It’s not a dropdown but a searchbox, my bad.
This is how the searchox is constructed:

image
image1920×1104 80.4 KB

It’s in a group inside a reusable element.

Also it’s the webapp viewed on a iphone 16 pro. The wrapper is The BDK.
Strangely there is no issue on android.
Thank you for your time.

5

I wouldn’t use this method because you have limited options for how the design appears on many devices.

(if using native) I would recommend either using a SHEET and passing the results there in a short list.

OR you can use a Floating group that covers the whole screen and pass your list of options there in a RG (if using Web)

6

Thank you all for your help.

To solve the issue, I replaced the dropbox by a combination of input, fyzzy search and repeating group