こんにちは、私がこのような選択フィールドでchosenを使用するとき:
<select id="mySelect" style="width: 65.935%;" multiple>
Chosenは、パーセントではなく65.935ピクセルの幅で<ul class="chzn-choices">
を生成しました。 今のところ、この初期化でハックしました
$('#inputNewRecipient').chosen().next().css('width', '65.9574%');
敬具
Chosenの最新バージョンを使用していますか?
そして、どのブラウザを使用していますか? そして、選択されたバージョン(jQueryまたはPrototype)はどれですか?
これをすべて忘れてすみません-少し急いでいました!
選択されたバージョンはup2date(0.9.13)、jQueryバージョン、ブラウザは最新のFirefox @ Ubuntu10.04です。
再テストしたところ、Bootstrapを使用している方法で、65.5%から55.5pxになりました。
ユーザー定義の幅を取得するためにstyle / cssに依存する優れた方法はありません(最新のブラウザーは代わりに実際の幅を返します)。つまり、Chosenは自動的にピクセル値になります。 画面のサイズ変更時に再計算を強制されたくないので、パーセンテージ幅のオプションのインターフェイスを提供しました。
$('#inputNewRecipient').chosen({ width: '65.9574%' });
@pfiller選択したインターフェースを使用して、幅を設定しています。 プレースホルダーテキストが生成された幅55pxで途切れましたが、これは選択した場合の問題ですか?
選択すると、入力フィールドがコンテナ内で可能な限り大きくなります。 場合によっては、プレースホルダーテキストが途切れるということです。 テキストをChosenに収めたい場合は、Chosenを少なくともその大きさにする必要があります。
これを調査しているときに、小さな問題に気づきました。 基本的に、フィールドはコンテナよりも大きくなる場合があります。 参照:#1167
ボックスの幅は約600ピクセルで、プレースホルダーのテキストは約6〜7文字で途切れました。
私は同じ問題を抱えています。
選択した幅のプロパティをパーセンテージ(33%)に設定すると、これが発生します。
これらのcssスタイルをオーバーライドすることで問題を回避しました:
... li.search-field {
幅:100%;
}
... li.search-field input.default {
幅:自動!重要;
}
同様の問題もありました:
次のスタイルをオーバーライドすると、うまくいきました。
li.search-field {
幅:100%;
}
li.search-choice + li.search-field {
幅:20%;
}
これで問題が解決しました
li.search-field {
幅:100%!重要;
}
li.search-field input.default {
幅:100%!重要;
}
最も参考になるコメント
これで問題が解決しました
li.search-field {
幅:100%!重要;
}
li.search-field input.default {
幅:100%!重要;
}