CODEWITHSUNDEEP
iphonehtmlcssmobilemobile-safari
GlennG
GlennG

Reputation: 3000

<select> with size attribute: iPhone renders blank

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:

Firefox example rendered select dropdown

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).

iPhone example rendering

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

Rendering from JSFiddle

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

Removing CSS height

Upvotes: 16

Views: 14796

Answers (4)

Malasorte
Malasorte

Reputation: 1173

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

Upvotes: 3

80sTron
80sTron

Reputation: 121

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.

Upvotes: 1

Alexey Ivanov
Alexey Ivanov

Reputation: 8236

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

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

Upvotes: 6

A-Live
A-Live

Reputation: 8944

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

enter image description here

Your webpage at firefox:

enter image description here

Upvotes: 2

Related Questions