I would like to render multiple options underneath each other in the same way desktop browsers present such items
<select size="10" name="selectionList"> <option value="5">Sparrow</option> <option value="18">Snowbunting</option> <option value="13">Purple-crowned Fairywren</option> <option value="19">Eagle</option> <option value="16">Hawk</option> </select>
On any standard desktop web browser these items are rendered below one another with a potential scroll bar on the left hand side. However on both Android and iOS browsers only the selected item is rendered with the rest of the allocated space being wasted. When a selection is attempted, the options menu dialog is presented.
Typically since I specify size="10" up to 10 items should be displayed at the same time. I can sort of understand the reason why they have opted to implement it they way they did, but I am hoping that there is a simple CSS trick to change the default behaviour.
How can I get the mobile device browser to render my select option the same way as desktop browsers without presenting the option menu dialog.
preguntado el 08 de noviembre de 11 a las 18:11
Trying it now in Android 2.3.3 SDK - if you add border to css, e.g.: style="border: solid 1px #999999", it shows full size select box. But selected options is invisible for some reason. The browser is too buggy.
I don't think multiple select is the right tool for the job. I would much rather use múltiples casillas de verificación instead. If the list is quite extensive you could also add a search input at the top that would filter the list on the fly.