iOS 6 Select Menu vs iOS 7 Select Menu

Question

The select menu (the pinwheel) within the new iOS 7 truncates the items as shown in this photo.

Is there anyway to prevent the truncating that's occurring by default so the select items "wrap" so the select experience functions more like iOS 6?! I'm looking for CSS and/or jquery solutions. I'm not able to find any topics on the matter either...

Any support in this area would be helpful

I also checked apple's site (to see if they are doing anything different) and they suffer from the same problem with their select menus. http://i.stack.imgur.com/2eBCy.jpg

Answer 1

As said here ( -> Line Break in HTML Select Option?) you sadly aren't able to insert a line break into an <option> tag (I tried it myself with several possible solutions but it didn't work). So I really don't understand why Apple changed this to be only one row of text. I would recommend using jQuery Mobile (very easy to learn and use) because it has it own independent and customizable select form element (look for "Custom select menu" in the API docs -> http://api.jquerymobile.com/selectmenu/).

Answer 2

Well, as it turns out, if I insert a fake option group label it disables the truncating.

How to fix truncated text on <select> element on iOS7

<select>
  <option selected="" disabled="">Select a value</option>
  <option>Grumpy wizards make toxic brew for the evil Queen and Jack</option>
  <option>Quirky spud boys can jam after zapping five worthy Polysixes</option>
  <option>The wizard quickly jinxed the gnomes before they vaporized</option>
  <option>All questions asked by five watched experts amaze the judge</option>
  <optgroup label=""></optgroup>
 </select>