web-dev-qa-db-ja.com

iOS7で<select>要素の切り捨てられたテキストを修正する方法

HTML select要素のオプションを選択するときにiOS7がテキストを切り捨てないようにする方法はありますか？ iOS7は、オプションテキストのテキストを折り返すのではなく切り捨てます。私の特定のケースでは、これはまったく使用できません：

enter image description here

上記のスクリーンショットは、jQuery Mobileで構築されたhtml 5アプリから取得されました。この問題はiOS6には存在しないことにも言及する必要があります。

htmljquery-mobileios7jquery-mobile-select
27
Lucian

選択リストの最後に空のoptgroupを追加します。

 <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>
45
Doug Wilson

上記の答えと同様ですが、JSを使用してドキュメント内のすべての選択に対して空のoptgroupを追加します。

// 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"));
    }
}

これが同じ問題を抱えている誰かに役立つことを願っています。

14
Alex Plugaru