ライ麦畑でつかまえられて、思わず出たオナラが案外フローラルだった感動を貴方にも。

スポンサーサイト

一定期間更新がないため広告を表示しています

2015.06.06 | - | - | - | pookmark

iPhone(iOS7)のselect box(picker)で選択肢が省略されてしまう際の対処法

セレクトボックスの選択肢が長すぎた場合、
iPhone(iOS7)のピッカーだと下記のように↓語尾が省略されてしまうんですよね。
(iOS6の時は折り返し表示で問題なかったんですが)







省略されている部分がある程度わからなくても良い場合は問題ないのですが
例えば日にちだったり、予約時間だったりした場合はこのままだと問題があります。
これまで自分は、対処法としてjQueryのプラグイン(jquery.selectify.js)などで、
ネイティブのピッカーを使わない方法を取っていたのですが、
もっと良い方法を下記の海外サイトで見つけました。



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



上のサイトをご覧になればわかるのですがセレクトボックスの
optionの一番最後に空要素の<optgroup label=""></optgroup>を入れるようです。
セレクトボックスの数が少なければ、これだけで良いのですが、
セレクトボックスが多い、フォームが複数あるなどでしたら下記のようなJsを
読み込ませてiOS7の時だけ<optgroup label=""></optgroup>を
挿入させてしまえば良いようです。

$(function() {    
    // 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"));
        }
    }
});




うまくいくとこんな風に↓、省略されずに表示されます(やった―!)







1年くらい前から解決方法を探していたんですが、やっとたどり着きました。
同じことでお困りの皆さんのお役に立てれば嬉しいっす。

 

スポンサーサイト

2015.06.06 | - | - | - | pookmark
comment
comment post





trackback URL
トラックバック機能は終了しました。
trackback

Powered by paperboy&co & JUGEM