How can I show the select options at the bottom of the screen on a mobile device?

I have a number input and a select input next to it like the image attached When I focus on the input[type=number][inputmode=decimal] , it works correctly where my number keyboard pops up however, when I move to the select options, the keyboard goes away and it is only focused upon. I want to allow the user to keep their hands at the bottom of screen and select an options like option 1 and 5 here in this website http://uipatterns.io/single-value-selection/select And then once they select an input, allow them to navigate to the next input field How can I do that?
UI Patterns
Single value selection | UIPatterns.io
Explore the Single value selection mobile design pattern. Find solutions to the following problem: The user needs to pick a single value from a list of available options.
No description
9 Replies
Super 🦸🏻
Super 🦸🏻OP7mo ago
No description
Super 🦸🏻
Super 🦸🏻OP7mo ago
Medium
Dropdown alternatives for better (mobile) forms
Using a dropdown menu usually seems a no-brainer but it’s also easy to misuse due to its limitations. You can do better.
Super 🦸🏻
Super 🦸🏻OP7mo ago
I would like this
No description
MarkBoots
MarkBoots7mo ago
on what phone/os/browser are you testing? For me the select options show up in the phone's ui on android chrome/firefox. note, every phone/os/browser have their own way to show/style that ui. there's not much you change. otherwise you have to build it fully from scratch
MarkBoots
MarkBoots7mo ago
No description
Super 🦸🏻
Super 🦸🏻OP7mo ago
I see That’s good to know I’m using an iPhone and it looks like this
No description
Super 🦸🏻
Super 🦸🏻OP7mo ago
Funny thing is that when I change it to be a multiple select it looks like this which is basically what I want with the options appearing at the bottom of the screen
No description
clevermissfox
clevermissfox7mo ago
This project is using dialogs and for mobile it seems to match the native ui and slide up from the bottom. Doesnt fit your use case perfectly but maybe it will help https://github.com/argyleink/gui-challenges/tree/main/dialog
GitHub
gui-challenges/dialog at main · argyleink/gui-challenges
Components from the YouTube show GUI Challenges: accessible, responsive, adaptive and cross browser components. - argyleink/gui-challenges
Super 🦸🏻
Super 🦸🏻OP7mo ago
Thank you
Want results from more Discord servers?
Add your server