Working on a webapp here that must run on the iPad (so, Safari Mobile).
I have this code that works fine in just about anything except iPad:
<select class="gwt-ListBox" size="12" multiple="multiple">
<option value="Bleeding Eyelashes">Bleeding Eyelashes</option>
<option value="Smelly Pupils">Smelly Pupils</option>
<option value="Bushy Eyebrows">Bushy Eyebrows</option>
<option value="Green Vessels">Green Vessels</option>
<option value="Sucky Noses">Sucky Noses</option>
</select>
What it’s supposed to look like is a box with 12 lines ans 5 of them filled up. It works fine in FF, IE, Chrome, Safari Win. But, when I open it on iPad, it’s just a single line!
Styling it with CSS doesn’t work. It just makes the single line bigger if I set the height. Is there a way to make it behave the same way as in normal browsers, or do I nave to make a custom component?
Thanks.
There is no way to do this. You have to implement your own component.
Source: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/SafariWebContent.pdf (dead link)