CODEWITHSUNDEEP
htmljquery-mobileios7jquery-mobile-select
Lucian
Lucian

Reputation: 4001

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

Is there any way to prevent iOS7 from truncating the text when selecting an option on a html select element? iOS7 truncates the text on the options text instead of wrapping it. In my specific case this is totally unusable:

enter image description here

The above screenshot was taken from a html 5 app built with jQuery Mobile. I should also mention that this issue is not present on iOS6.

Upvotes: 28

Views: 20193

Answers (2)

Alex Plugaru
Alex Plugaru

Reputation: 2249

Like the answer above, but add an empty optgroup for every select in the document using JS:

// iOS 7 hack: Add an optgroup to every select in order to avoid truncating the content
if (navigator.userAgent.match(/(iPad|iPhone|iPod touch);.*CPU.*OS 7_\d/i)) {
    var selects = document.querySelectorAll("select");
    for (var i = 0; i < selects.length; i++ ){
        selects[i].appendChild(document.createElement("optgroup"));
    }
}

Hope this comes in handy to someone having the same issue.

Upvotes: 17

Doug Wilson
Doug Wilson

Reputation: 4270

Add an empty optgroup at the end of the select list:

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

Upvotes: 54

Related Questions