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.
9 Replies
Here is another example
https://medium.com/@kollinz/dropdown-alternatives-for-better-mobile-forms-53e40d641b53#8c63
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.
I would like this
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
I see
That’s good to know
I’m using an iPhone and it looks like this
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
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
Thank you