Chosen: 幅の問題

作成日 2013年04月25日  ·  9コメント  ·  ソース: harvesthq/chosen

こんにちは、私がこのような選択フィールドでchosenを使用するとき:

<select id="mySelect" style="width: 65.935%;" multiple>

Chosenは、パーセントではなく65.935ピクセルの幅で<ul class="chzn-choices">を生成しました。 今のところ、この初期化でハックしました

$('#inputNewRecipient').chosen().next().css('width', '65.9574%');

敬具

Bug

最も参考になるコメント

これで問題が解決しました

li.search-field {
幅:100%!重要;
}
li.search-field input.default {
幅:100%!重要;
}

全てのコメント9件

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で途切れましたが、これは選択した場合の問題ですか?

bug

選択すると、入力フィールドがコンテナ内で可能な限り大きくなります。 場合によっては、プレースホルダーテキストが途切れるということです。 テキストをChosenに収めたい場合は、Chosenを少なくともその大きさにする必要があります。

これを調査しているときに、小さな問題に気づきました。 基本的に、フィールドはコンテナよりも大きくなる場合があります。 参照:#1167

ボックスの幅は約600ピクセルで、プレースホルダーのテキストは約6〜7文字で途切れました。

私は同じ問題を抱えています。

2013-12-10--1386684424_559x48_scrot

選択した幅のプロパティをパーセンテージ(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%!重要;
}

このページは役に立ちましたか?
0 / 5 - 0 評価