15

Problem:

My dropdown is loaded dynamically has some options that are quite long and this is messing up my page layout. I'd like the size of the select element to be small but when expanded, allow the user to see all the long options. To do this I have set the width of the SELECT to a fixed value e.g width:200px;

Expected/Desired Behavior (Works in Chrome)

enter image description here Actual Behavior in IE8

enter image description here

What I have tried:

select{
    overflow:show;
}
option{
    overflow:show;
    width:1000px;
}

SIMPLIFIED FIDDLE:

http://jsfiddle.net/gCbhq/2/

4

6 に答える 6

11

Ok。これが役立つかどうかはわかりません。Jquery Mobile を使用しており、選択ボタンはアイコンのみ (= 28px) です。IE8では、すべてのオプションがあるため、28pxもあります。

私はこれでそれを修正しました：

select { min-width: 150px !important; }

ただし、Jquery Mobile は選択を非表示にし、独自の要素を「上に」追加するため、これは機能します。

残念ながら、ここに修正があります - http://css-tricks.com/select-cuts-off-options-in-ie-fix/

于 2012-12-14T20:49:00.100 に答える
6

これに対してできることは、それをハックして、近くに見えるようにすることだけです。単体のCSSを追加・変更しただけではChromeの挙動はエミュレートできませんselect。

これは、他の要素を追加せずに取得できる限り近いものです。

http://css-tricks.com/examples/SelectCutoffFix/ (実装の詳細については、上部の記事に戻るをクリックしてください)

上記の解決策は、あなたが求めているものでできる最善の方法ですselect.

div周りに少しスタイリングを加えて を追加したい場合select(代替または特別な UI ウィジェットはありません)、見た目を少し良くすることができます:

http://www.getharvest.com/blog/wp-content/uploads/2009/12/select_box_demo.html

(詳細はこちら: http://www.getharvest.com/blog/2009/12/dropdown-problems-on-internet-explorer/ )

その解決策は、あなたが探していることを私が見たのとほぼ同じです。それはハックであると言われ、いくつかの問題があります：

  • 同じものを 2 回続けて選択すると、optionフォーカスがselect
  • がselect開いていると、下矢印ボタンが消えます (オーバーフローが囲んでいる div によって隠されているため)

上記の解決策で少しは近づくことができますが、どちらも私が望むほど洗練されたものには見えません。ただし、ページに他に何も追加できない場合は、これらが最良のオプションになります (過去に数え切れないほどの時間をかけて調査した結果に基づいています)。ええ、それはひどいですが、私たちは皆同じ船に乗っています。

幸運を！

于 2012-12-18T22:18:02.377 に答える
2

正確な解決策はありませんが、この小さな html と css のハックを使用して目標を達成できます。 HTML

<div class="divWrapper">
 <select class="selectBox">
 <option>011111111111111111111111111111111111111111111111111112</option>
 <option>011111111111111111111111111111111111111111111111111112</option>
 <option>011111111111111111111111111111111111111111111111111112</option>
 <option>011111111111111111111111111111111111111111111111111112</option>
 </select>
 </div>

CSS

.divWrapper{
    width:150px;
    overflow:hidden;
    }

.selectBox{
    width:150px;
    }

.selectBox:focus{
    width:auto;
    }

ここでは、幅が selectbox div と等しくなければならない div で selectbox をラップしています。そして、選択ボックスの焦点を合わせて、再び自動幅にします。

jqueryが必要な場合は、jquery部分を使用してください。オプションを選択すると、定義したとおりに選択ボックスの幅が変更されます。http://jsfiddle.net/sudhanshu414/5NEWc/2/でチェックしてください

于 2012-12-21T05:48:27.480 に答える
1

私は動作を再現できませんが、css でこれを試すことができます:

select:focus{width:auto !important;}

ただし、 JQuery-UIも参照できます。

[EDIT-1-]: IE の予期せぬ動作を再現してみました。7/8/9 では問題が見られません。おそらく、あなたは本当に古い IE を使っていますか? 可能であれば、バージョン 8 の更新を実行してみてください。

あなたがやりたいことは、はるかに達しています。子の外観を変更し、その間に SELECT-parent を通常のサイズに保つことはできないと思います。両方の要素を分離する必要があります。ドロップダウン リストに独自のソリューションを実装することもできますが、他の IE エディションや Chrome などの他のブラウザでは通常の動作であるように思われるため、これは無駄な作業になる可能性があります。

$(document).ready(function(){
  $('select').click( function () { 
     //Try to alter the css here - but I'm not sure if this could work.
  });

[編集-2-]: JQuery-UI の選択メニューが計画されています。しかし、他の JQuery プラグインを検討する場合は、dropkick.jsを使用するか、このリストを参照してください。

于 2012-12-19T12:46:19.003 に答える
1

これは、この問題に対する純粋な css ソリューションとして使用するものです。他のページ要素をプッシュする select に焦点を当てる場合は、単に select:focus を z-index します。また、必要に応じて select:focus 幅を auto に設定することもできますが、それでも機能します。

<!DOCTYPE html>
<html lang="en">
  <head>
<style type="text/css">
select:focus {width:300px;}
.cover select {width: 150px;} 
</style>

  </head>
  <body>


<div class="cover">
<select>
 <option>Select Box</option>
 <option>Option One a line of text</option>
 <option>Option Two a longer line of text</option>
 <option>Option Three is a much longer line of text</option>
 <option>Option Four </option>
</select>
</div>


  </body>
</html>

クラス「カバー」を削除して選択のスタイルを設定すると、選択もフォーカス時にサイズ変更されます。そのため、どのように表示するかについてのオプションがあります。

これは、最新バージョンの chrome、firefox、および IE でテストされています。

于 2012-12-19T01:13:48.133 に答える
0

スタイルを設定したいOSウィジェットであるため、IEでCSSだけを使用することはありません。

JavaScript を使用して HTML を挿入し、JavaScript を使用して select の動作を模倣しますが、他の HTML マークアップを使用します。

https://github.com/revsystems/jQuery-SelectBoxまたはこちら
http://www.bulgaria-web-developers.com/projects/javascript/selectbox/

于 2012-12-17T16:49:56.043 に答える