I’m in a bit of a situation with my HTML <select> dropdowns, when they are displayed in an iPhone or Android browser. I often need to render <option> labels that are quite long, such as for instance
[AccountType] [EUR] – [Customer] – CH12 3456 7890 1234 5678 9
On Android, this will render something like that:
On the iPhone it’s even worse. While I like the native look and feel, the cropping of the labels is a no-go. Circled in red, you’ll find how the dropdown itself is rendered. I could live with that. But check out the blue popup that appears, when I click on it. The user will never find his data…
PLEASE, before you answer…
… consider these points:
- I can abbreviate some information, but I will still have cases with long option labels in the select. So no need to tell me that the IBAN could be abbreviated, etc.
- I cannot rely on CSS styling of <select> or <option> elements.
- User hunter has already proposed the <optgroup> tag here. That’s quite a nice idea and will be a small workaround, but is not enough, as the IBAN is still cropped by both iPhone and Android browsers 🙁
- I already know the very nice looking jQuery UI Selectmenu prototype. Unfortunately, it’s not yet compatible with jquery-ui 1.8.5 and there is no guarantee when it will be stable.
- I am using jquery and jquery-ui 1.8.5, so any ideas / references to plugins are very welcome.
- Any other ideas to circumvent that problem GENERALLY are welcome.
While the proposed workarounds given by hunter and Ivan Buttinoni were creative, and good ideas, I had to find a different solution in the end. It now looks similar to jQuery UI’s combobox component:
http://jqueryui.com/demos/autocomplete/#combobox