SELECT内のOPTION要素が長すぎてモバイルレイアウトが壊れています

私は応答性の高いサイト設計をしていますが、そのほとんどはうまく動作します。

チェックアウトページには、選択した国の選択要素があります。オプションのいくつかは非常に長く、例えば、 "コンゴ、民主共和国"です。これはレイアウトを右に押し出し、レイアウトを破ってレイアウトを水平にスクロールさせます - これは恐ろしいことです;)

選択を完全に削除すると、レイアウトは正常に表示されます。そして、私がすべてのオプションを削除し、それらの場所に短いテストを入れると、それはうまく動作します。ですから、長いオプションが問題であると確信しています。選択自体は50%の幅しかないので、画面からは出ない。つまり、「見えない」オプション要素である。

Here is a temp link: http://moymadethis.com/oca/test.html

デスクトップでうまく動作し、問題はiphone mobile(safari、chrome、opera)にあります。

ありがとう、誰かがこれのための解決策にいくつかの光を発することを願っていますか? スティーブ

0
nl ru de
残念ながら、私はスクリーンショットをアップロードすることができませんでした:(私はその行を削除したと思った。
追加された 著者 user1406440,
おそらくjqueryを選択可能にしてください。選択、およびオプション要素は、きちんとスタイル可能ではありません。
追加された 著者 user1721135,
スクリーンショットは表示されません(しかし、問題は言葉の説明から理解できると思います)。
追加された 著者 Jukka K. Korpela,

3 答え

通常、 select 要素自体に幅を設定するだけで十分です(親要素の幅の設定とは逆です - 必要に応じて内部要素がデフォルトでオーバーフローします)。

 select { width: 6em; }

メニューを開くと(要素がフォーカスされているとき)、オプションはコンテキストに必要な幅で表示されますが、これはページコンテンツの上部の「レイヤー」に表示されるため、レイアウトを妨げてはなりません。

問題が解決しない場合は、最小限のHTMLとCSSコードを投稿して問題を再現し、テストされたプラットフォームとブラウザを特定してください。

1
追加された

try using max-width on select element eg #myselect {max-width:95%;}

0
追加された

私は最近、私が取り組んでいるプロジェクトでまったく同じ問題を抱えていました。私は解決策が使用することがわかった!私の場合は100%だった選択幅で重要。これにより、ソリューションはモバイルとデスクトップで完全に動作します。

0
追加された