HTML <select> element is abbreviated in iPhone or Android browsers

Question

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.

Answer 1

Are you able to create groups of options to minimize the redundant text?

<option value="-1">[AccountType] [EUR] - [Customer]</option>
<option value="1">CH12 3456 7890 1234 5678 9</option>
<option value="2">CH10 1111 2222 3333 4444 5</option>

Then make the value="-1" unselectable with jQuery

or you could use optgroup elements for organization

<optgroup label="[AccountType] [EUR] - [Customer]">
    <option value="1">CH12 3456 7890 1234 5678 9</option>
    <option value="2">CH10 1111 2222 3333 4444 5</option>
</optgroup>    

Answer 2

I ran into the same problem. I wanted an imitation drop-down box similar to the jQuery UI combobox but I didn't want to use jQuery UI so I used this other jQuery selectbox plugin. It is somewhat buggy but better for my purposes than the default iPhone select element.