1

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 helpfulenter image description here

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. https://i.stack.imgur.com/2eBCy.jpg

Evan
  • 3,411
  • 7
  • 36
  • 53
  • Here is a helpful question on SO, http://stackoverflow.com/questions/19090160/iphone-ios7-3d-select-drop-down-feature. – Josh Powell Dec 18 '13 at 14:14
  • How did Apple think this was a good decision? Can you install a different web browser and see if it suffers the same effect? Maybe it's just a Safari specific issue. – MonkeyZeus Dec 18 '13 at 14:22
  • It displays the same in chrome on my iphone, could be just for webkit browsers. :[ – Josh Powell Dec 18 '13 at 14:24
  • Sadly `-webkit-appearance: none;` does not work, I just tested it on the mobile site I am working on. – Josh Powell Dec 18 '13 at 14:30

2 Answers2

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>
Community
  • 1
  • 1
Evan
  • 3,411
  • 7
  • 36
  • 53
0

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

Community
  • 1
  • 1
stoeffn
  • 556
  • 3
  • 9
  • 18