I'm testing a multi-select box on iPhone 5S iOS 7 -- on Browserstack's "real devices" -- but it seems buggy and wanted to know if this is a known issue, and if there's a workaround.
Buggy behaviour 1 Safari removes the last option a user has selected after choosing done, moving to the next > input field (if there is one), or hitting a submit button (if there is one).
<select multiple="multiple">
<option value="Saxophone">Saxophone</option>
<option value="Flute">Flute</option>
<option value="Clarinet">Clarinet</option>
</selct>
So, before making any selections the dropdown menu displays "0 Items"; if you were to select Saxophone from the above list, it would display "Saxophone", but then when you hit Done Saxophone is deselected and it displays "0 Items" again. If you were to select Saxophone then Flute, it would display "2 Items", but then when you hit Done it would deselect Flute and display only "Saxophone". And just for the FUN of all this, if you were to select Saxophone, Flute and lastly Clarinet, then hit Done, it would deselect Clarinet and display "2 Items".
Note: This occurs with or without the optgroup's as described below.
Buggy behaviour 2: Safari crashes when using an optgroup when the select box is selected. A workaround I've found is placing a disabled option before the first optgroup.
So, this crashes:
<select multiple="multiple">
<optgroup label="Private">
<option value="Saxophone">Saxophone</option>
<option value="Flute">Flute</option>
<option value="Clarinet">Clarinet</option>
</optgroup>
</selct>
But this doesn't:
<select multiple="multiple">
<option disabled value="choose"></option>
<optgroup label="Private">
<option value="Saxophone">Saxophone</option>
<option value="Flute">Flute</option>
<option value="Clarinet">Clarinet</option>
</optgroup>
</selct>
I'm also wondering if anybody has seen this on other iOS versions/devices.
Thanks!
Related
My HTML table is simple. When I click on an option thats visible in the select box, it selects fine however, when I click on an option thats not visible / out of view, the list of options simply scrolls to the top and I get nowhere. The option wont mark as selected even though its highlighted.
This only seems to be a problem with Chrome though as it works fine in FF.
<select class="propertytype" multiple>
<option value="Villa">Villa</option>
<option value="Hotel">Hotel</option>
<option value="HotelVillas">Hotel Villas</option>
<option value="Apartment">Apartment</option>
<option value="Private">Private</option>
<option value="Villa&ApartmentSales">Villa & Apartment Sales</option>
<option value="NewDevelopments">New Developments</option>
</select>
I have a problem with multiselect box on iPhone Safari. When I open the multiselect box it automatically selects the first option. Here is the code snippet that i am using:
<select multiple>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select>
I have added a blank option with the disabled attribute (see below from here) as the first option but it didn't work in iPhone Safari. I am using an iPhone 6s+:
<option disabled></option>
disable=disable
just add it in option so that no one will be able to access that option
<option selected=selected value="test0">Pick an option</option>
Use the attribute selected to specify that this option should be the one selected. Or put the first one you want to see selected by default at the top of your list.
disabled attribute will, well i know how unprobable it sounds, disable your select option, thus means it will not be able to be selected.
I have a select div with options, and it worked fine before but now the last option is not being highlighted when I hover over it, what could be the issue?
<select id='theme_s' title='Click to change your theme'>
<option value='flame' selected>flame</option>
<option value='mint'>mint</option>
<option value='neon'>neon</option>
<option value='cmd'>cmd</option>
<option value='sky'>sky</option>
</select>
This is a known bug of the recently updated version of chrome.
https://code.google.com/p/chromium/issues/detail?id=334227
i have a combobox and its on a narrow part of a webpage. below is my dropdown html.
THe issue is that in IE 7 only (works fine in firefox) after i click on the dropdown, the list of items pops up and i go to click on an item in the list and it disappears before i get a chance to click.
It seems to work fine in IE8 as well but in IE7 (most of my users) no one has time to click before the list disappears.
<select id="staticData">
<option value="">(Please select)</option>
<optgroup label="Geographical">
<option value="B">United states of AMerica</option>
<option value="C">Europe</option>
<option value="D">Asia</option>
</optgroup>
<optgroup label="Related">
<option value="RoadmapItem">Roadmap items</option>
</optgroup>
</select>
This fixed it.
http://css-tricks.com/select-cuts-off-options-in-ie-fix/
I have been hitting a brick wall on this for about an hour now. I have a list of counties that I build and add to my view data (counties) and then render the list with a: html.DropDownList('invoice.county', counties) in my view.
It appears to render correctly but FF REFUSES to set the selected item. I have tried swapping the values out for integers (so they don't match the display text) and that did not work. FF just displays the first item in the list
<select id="invoice_county" name="invoice.county">
...
<option value="Lander">Lander</option>
<option selected="selected" value="Laramie">Laramie</option>
<option value="Larimer">Larimer</option>
...
</select>
I have trimmed the values to the ones surrounding the selected item.
Can anyone give me insight into this????
Firefox has a weird bug/feature that means if you just refresh the page, it will select the option already selected regardless of whether the selected attribute is on another option. For example, if I put in:
<select id="invoice_county" name="invoice.county">
<option value="Lander">Lander</option>
<option selected="selected" value="Laramie">Laramie</option>
<option value="Larimer">Larimer</option>
</select>
Saved and refreshed in Firefox, then put:
<select id="invoice_county" name="invoice.county">
<option selected="selected" value="Lander">Lander</option>
<option value="Laramie">Laramie</option>
<option value="Larimer">Larimer</option>
</select>
instead and just refreshed after saving, it would keep "Laramie" selected. To stop this, try Ctrl-F5 rather than just F5 or refresh.
If you are using XHTML, you need a valid attribute/value pair:
<option selected="selected" value="x">
If you are using HTML, the mere presence of the attribute is enough:
<option selected value="x">
More information on W3C.