ejemplos - select multiple html ejemplo

Cómo arreglar texto truncado en el elemento<select> en iOS7

Question

¿Hay alguna forma de evitar que iOS7 trunque el texto al seleccionar una opción en un elemento de select html? iOS7 trunca el texto en el texto de opciones en lugar de envolverlo. En mi caso específico, esto es totalmente inutilizable:

La captura de pantalla anterior fue tomada de una aplicación html 5 creada con jQuery Mobile. También debo mencionar que este problema no está presente en iOS6.

Answer 1

Agregue un grupo de optgroup vacío al final de la lista de selección:

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

Answer 2

Como la respuesta anterior, pero agregue un grupo de opciones vacío para cada selección en el documento que usa 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"));
    }
}

Espero que esto sea útil para alguien que tenga el mismo problema.