<select> with size attribute: iPhone renders blank

Question

When rendering a select dropdown as below, the iPhone renders it blank. How can I fix this?

<select size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

The above example from http://www.w3schools.com/tags/att_select_size.asp. Their sample is http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_size

In Firefox (and all other browsers), it renders as:

However, on an iPhone, it's rendered blank. This is very bad for usability as the visitor doesn't know what's in the box (in our application, it's for selecting their address from several possibilities).

I've created a JSFiddle: http://jsfiddle.net/bqMEv/3/ The iPhone rendering is as follows; note that there's nothing shown when both:

• size is greater than 1
• and height is specified in CSS
• and no option is selected

Removing the CSS height shows that the iPhone ignores the size attribute.

Solution 1

Looks like there is no standard way to do it, based on content of other topics on stack overflow:

• Safari Mobile Multi-Line <Select> aka GWT Multi-Line ListBox
• jquery plugin to convert a <select size="10"> to a usable list on Safari mobile (iOS)

But author of the second topic wrote a plugin that emulates that behavior: https://github.com/redhotsly/safarimobile-multiline-select

Solution 2

My simple fix for this, using Jquery:

$(document).ready(function(){
if(navigator.userAgent.match(/(iPhone|iPod|iPad)/i)) {
$('#my_select_box').prepend('<option value="" selected="selected" disabled="disabled">..Please select something</option>');
}
});

Works like this:

1. Wait for document to load

2. If user visits the site using an iPhone, iPod or iPad execute script

3. Add a selected and disabled option at the top of your select list, with the text "..Please select something".

Does nothing in all other browsers, works great :D

Solution 3

If you need to display one of the options, use the following: HTML selected Attribute

---

---

Your webpage at firefox:

Solution 4

It appears that people here might not be fully understanding the issue. The problem is that the iOS browser will not render the label for the unselectable first field, which would typically be a "Please select ..." type indicator. If it is not selected, iOS renders it as blank. This is not desirable, because there are choices for the user to make, but the field appears as blank.

You cannot also set it programatically selected to get the "Please select" to display, because if the field is required, the form validation no longer works, as the browser considers the first field as selected, even though it is flagged as unselectable.

The "Bug" is that iOS browser will not display the label for the first field, when it is set as unselectable.

View more solutions

Comments

[GlennG]

The problem is that nothing is selected until the user has selected something. The use case is you've entered your postcode on a previous page, we search for the addresses, then display them in a multi-row select list for you to choose your address. The iPhone renders this as a big blank widget; everything else shows it with many rows of addresses.

[A-Live]

@GlennG Put selected attribute to make some value pre-selected, there's a reference at the answer and what you see on the screenshot is the first time I've opened dropdown not selecting anything myself (note the checkmark against the option with selected attribute)

[GlennG]

Using the example code, which is your PRE-SELECTED car? The only way this will work is to add a new option "-- Select car --", but this changes the HTML.

[A-Live]

@GlennG Using this code, preselected is the Saab option, did you try it ? Just add selected attribute to any option. Don't forget to refresh control with Submit Code button.

[GlennG]

Yes; adding the select attribute does work. But... unless I add a null option "-- select car", I don't know which item is pre-selected. What I really want is a fix to make Safari/iPhone work like other browsers.

[A-Live]

@GlennG I can't see any issue with iOs control, it looks kinda the same and works in the same way as at any other web-engine. If that is a UI-design question, that might be a good idea to go around developer.apple.com with your iPhone and see how they do it: they have the first "Select ..." option pre-selected and obviously they had to add a little of logic to parse the selection results. Is there any particular problem ?

[GlennG]

Seems that iOS doesn't support normal HTML <select> attributes of size > 1 or multiple selections. One has to resort to JavaScript as a workaround if the design calls for 'picker' style widgets.