HTML select size attribute on iPad

Question

Level 1

8 points

HTML select size attribute on iPad

The HTML select size attribute specifies the number of visible options in a drop-down list. The example below will show all four entries on the drop-down, however nothing was shown in iPad.

<html>
<body>
<select size="4">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</body>
</html>

Is there a way that I can show all four entires in iPad?

iPad, iOS 4

Posted on Nov 4, 2010 3:01 PM

Reply

Answer 1

Nov 4, 2010 3:49 PM in response to kingmoa

The size attribute is supported in all major browsers, except Google Chrome and Safari.

Source: http://www.w3schools.com/tags/attselectsize.asp

Reply

Answer 2

lllaass

Level 10

210,411 points

Nov 4, 2010 3:49 PM in response to kingmoa

This is a user's forum. I suggest you post in a developer's forum.
http://developer.apple.com/devforums/

Reply

Answer 3

JimHdk

Level 7

28,874 points

Nov 4, 2010 4:00 PM in response to BobTheFisherman

BobTheFisherman wrote:
The size attribute is supported in all major browsers, except Google Chrome and Safari.

Source: http://www.w3schools.com/tags/attselectsize.asp

The size attribute is supported as usual in Mac OS Safari. In mobile Safari the size attribute does not produce a multiple element list but, rather, a pop-list with multiple elements. The appearance is different but the functionality is the same.

Reply

Answer 4

Nov 4, 2010 4:47 PM in response to JimHdk

JimHdk wrote:

BobTheFisherman wrote:
The size attribute is supported in all major browsers, except Google Chrome and Safari.

Source: http://www.w3schools.com/tags/attselectsize.asp

The size attribute is supported as usual in Mac OS Safari. In mobile Safari the size attribute does not produce a multiple element list but, rather, a pop-list with multiple elements. The appearance is different but the functionality is the same.

Using your Safari browser --- Compare this result using Safari OSx http://www.w3schools.com/tags/tryit.asp?filename=tryhtmlselectsize results in 4 items in dropdown.

and using your Firefox browser this result using FireFox http://www.w3schools.com/tags/tryit.asp?filename=tryhtmlselectsize results in 2 items in dropdown.

You will notice that Safari does not support the size attribute of the select tag which in this case was "2".

Message was edited by: BobTheFisherman

Reply

Answer 5

kingmoa Author

Level 1

8 points

Nov 4, 2010 5:28 PM in response to kingmoa

Based on our testing, Safari iOS does not support the size attribute.
The following URL supposes to show 2 items in the drop down list but it does not:
http://www.w3schools.com/tags/tryit.asp?filename=tryhtmlselectsize
This works basically in all browers, including Safari on Windows but just not Safari iOS.
We have a feature that allows user to move the items up and down in a drop-down and between another drop-down. It works pretty well with the size attribute but it is difficult without it as user cannot see what items are selected.

Is there a work around or another way to do this without the size attribute?

Reply

Answer 6

JimHdk

Level 7

28,874 points

Nov 4, 2010 5:39 PM in response to BobTheFisherman

BobTheFisherman wrote:

JimHdk wrote:

BobTheFisherman wrote:
The size attribute is supported in all major browsers, except Google Chrome and Safari.

Source: http://www.w3schools.com/tags/attselectsize.asp

The size attribute is supported as usual in Mac OS Safari. In mobile Safari the size attribute does not produce a multiple element list but, rather, a pop-list with multiple elements. The appearance is different but the functionality is the same.

Using your Safari browser --- Compare this result using Safari OSx http://www.w3schools.com/tags/tryit.asp?filename=tryhtmlselectsize results in 4 items in dropdown.

and using your Firefox browser this result using FireFox http://www.w3schools.com/tags/tryit.asp?filename=tryhtmlselectsize results in 2 items in dropdown.

You will notice that Safari does not support the size attribute of the select tag which in this case was "2".

Message was edited by: BobTheFisherman

The reason that Mac OS Safari displays 4 items in the example you cite is because the minimum number of items in a selection list that Safari will display is 4. If you try the following example where size is set to 5 and there are seven list items you will see that Safari does, indeed, support the size attribute (with the lower limit of 4).

Here 5 is specified as the size and only 5 items (of the seven given) will be displayed.

<html>
<body>

<select size="5">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="ford">Ford</option>
<option value="mercury">Mercury</option>
<option value="lincoln">Lincoln</option>
</select>

</body>
</html>

Reply

Answer 7

JimHdk

Level 7

28,874 points

Nov 4, 2010 5:45 PM in response to kingmoa

kingmoa wrote:
Based on our testing, Safari iOS does not support the size attribute.
The following URL supposes to show 2 items in the drop down list but it does not:
http://www.w3schools.com/tags/tryit.asp?filename=tryhtmlselectsize
This works basically in all browers, including Safari on Windows but just not Safari iOS.
We have a feature that allows user to move the items up and down in a drop-down and between another drop-down. It works pretty well with the size attribute but it is difficult without it as user cannot see what items are selected.

Is there a work around or another way to do this without the size attribute?

If there are not too many items perhaps you could switch to radio buttons or check boxes. These will always be visible.

Reply

Answer 8

kingmoa Author

Level 1

8 points

Nov 4, 2010 5:59 PM in response to kingmoa

It sounds like we'll need to re-implement this for iPad support. I was trying to avoid that if there is a workaround or something. Anyway our requirement is that all items in the drop-down list need to be visible. This allows user to select and move the the item within the same list and between another list. May be we'll use the checkbox as suggested since typically there is not too many items. Meanwhile, please let us know if there is any other suggestions.

Reply

Answer 9

Nov 5, 2010 7:00 AM in response to JimHdk

JimHdk wrote:

BobTheFisherman wrote:

JimHdk wrote:

BobTheFisherman wrote:
The size attribute is supported in all major browsers, except Google Chrome and Safari.

Source: http://www.w3schools.com/tags/attselectsize.asp

The size attribute is supported as usual in Mac OS Safari. In mobile Safari the size attribute does not produce a multiple element list but, rather, a pop-list with multiple elements. The appearance is different but the functionality is the same.

Using your Safari browser --- Compare this result using Safari OSx http://www.w3schools.com/tags/tryit.asp?filename=tryhtmlselectsize results in 4 items in dropdown.

and using your Firefox browser this result using FireFox http://www.w3schools.com/tags/tryit.asp?filename=tryhtmlselectsize results in 2 items in dropdown.

You will notice that Safari does not support the size attribute of the select tag which in this case was "2".

Message was edited by: BobTheFisherman

The reason that Mac OS Safari displays 4 items in the example you cite is because the minimum number of items in a selection list that Safari will display is 4. If you try the following example where size is set to 5 and there are seven list items you will see that Safari does, indeed, support the size attribute (with the lower limit of 4).

Here 5 is specified as the size and only 5 items (of the seven given) will be displayed.

<html>
<body>

<select size="5">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="ford">Ford</option>
<option value="mercury">Mercury</option>
<option value="lincoln">Lincoln</option>
</select>

</body>
</html>

So it does not work. It only appears correctly if you want to display 4 or more in the dropdown box.

As an aside, is this a Safari standard way of implementing the select tag with the size attribute? If so, maybe Safari users should rethink their bashing of Microsoft IE for implementing non-standard functionality. I'm not suggesting that you participate in that activity and I thank you for testing and explaining this Safari quirk.

Reply