iOSのSafariからプルダウンメニューをタップしたら、長い（文字数の多い）項目が…で省略されて全部表示されない場合の対処法のご紹介です。
selectタグの項目が全文表示されない場合
以下のようなプルダウンメニューをiOSのSafariで見ると、|
1 2 3 4 5 6 |
<select> <option value="赤坂見附駅（東京メトロ銀座線/東京メトロ丸ノ内線）">赤坂見附駅（東京メトロ銀座線/東京メトロ丸ノ内線）</option> <option value="永田町駅（東京メトロ半蔵門線/東京メトロ南北線）">永田町駅（東京メトロ半蔵門線/東京メトロ南北線）</option> <option value="麹町駅（東京メトロ有楽町線）">麹町駅（東京メトロ有楽町線）</option> <option value="四ツ谷駅（JR中央線・総武線/東京メトロ丸ノ内線/東京メトロ南北線）">四ツ谷駅（JR中央線・総武線/東京メトロ丸ノ内線/東京メトロ南北線）</option> </select> |
長い文字の選択肢は省略され、全部表示されませんので、
末尾を「…」で省略せずに全文表示する場合は、<select>の閉じタグの前（optionの最後）に
<optgroup label=””></optgroup>を追加します。
|
1 2 3 4 5 6 7 |
<select> <option value="赤坂見附駅（東京メトロ銀座線/東京メトロ丸ノ内線）">赤坂見附駅（東京メトロ銀座線/東京メトロ丸ノ内線）</option> <option value="永田町駅（東京メトロ半蔵門線/東京メトロ南北線）">永田町駅（東京メトロ半蔵門線/東京メトロ南北線）</option> <option value="麹町駅（東京メトロ有楽町線）">麹町駅（東京メトロ有楽町線）</option> <option value="四ツ谷駅（JR中央線・総武線/東京メトロ丸ノ内線/東京メトロ南北線）">四ツ谷駅（JR中央線・総武線/東京メトロ丸ノ内線/東京メトロ南北線）</option> <optgroup label=""></optgroup> </select> |
<optgroup label=””></optgroup>を追加することで、一番長い文字の項目に合わせて全体の文字サイズが縮小されて表示されます。
コメント