Chosen: selectが最初に非表示になっている場合、機能しません

はい、コーヒースクリプトにパッチを適用する必要があります。 また、私は隠された要素を設定する機能のためです。

+1は今日この問題に遭遇しました

私と同じように+1

回避策として、作成されたdivの幅を!importantフラグで設定できます。

#my_select_chzn {
  width: 100% !important;
}

実際、これにより、必要な場所に近づくことができます。 幅は完璧ではありませんが、すべてが表示されます。

#my_select_chzn {
  /* This is the only width setting you'll need to change. */
  width: 100% !important;
}
#my_select_chzn .chzn-drop {
  width: 100% !important;
}
#my_select_chzn .chzn-drop .chzn-search {
  width: 99% !important;
}
#web_template_exploit_name_chzn .chzn-drop .chzn-search input {
  width: 98% !important;
}

Chosenの以前のバージョンは、フォームフィールドの幅がcssを介して設定されているかどうかを実際にテストしました。 もしそうなら、それは幅の計算を使用しませんでした。 隠し要素をテストするために30行のコードを追加するよりも、この修正方法の方が好きだと思います。 このようなものはあなたのために働きますか？

幅を設定します。

  <select style="width:350px;" class="chzn-select">

JSは最初にセット幅をテストします。

  <strong i="10">@f_width</strong> = if @form_field_jq.css('width')? then parseInt(@form_field_jq.css('width'),10) else @form_field_jq.width()

@pfillerコードに小さなバグがあります。 インラインスタイルの幅がピクセル以外の単位（emなど）の場合、コードはそれをピクセルとして解釈します。 selected.jquery.coffeeの56行目を参照してください

人々はそれについて絶えず不平を言うでしょう、そしてあなたは最終的にその30行のコードを追加する必要があるでしょう。

こんにちは@pfiller 、それは動作しません。 width（）とcss（ "width"）はどちらも、非表示の要素に対して0を返します。 getHiddenDimensionsテクニックを使用していますが、うまく機能しています。

ところで、f_widthとget_side_border_paddingの両方で使用する必要があります

このために+1。

Chosenを統合しているサイトのロジックの多くは、最初のロード時に一部の選択が非表示になっていることに依存しているため、これにはさまざまな問題が発生します。

+1も。 可視性チェックを組み込む必要があります。

：+1 ：： + 1 ：： + 1：

ドロップダウンの幅が最初の起動時に永続的に設定されず、開いたときにテキストボックスの幅にサイズ変更されるだけのソリューションはどうですか？ そうすれば、入力の幅に触れる必要はありません。cssで設定されていると想定し、ドロップダウンを開くたびに読み取ります。

このために+1。 ChosenをExpressionEngineCMSのフィールドタイプに変えることにしましたが、EEの公開レイアウトでは、ページの読み込み時にフィールドを非表示にすることができます。

これが関連しているかどうかはわかりませんが、EEの場合は、幅が流動的であるか、単に常に含まれている要素の100％であることが最善です...

http://www.alistapart.com/articles/now-you-see-me/

これにぶつかった...それはまだ最新バージョンで起こっています

+1
このバグは、Netflixの内部アプリ用に選択されたプラグインの使用をブロックしています

：+1：この問題について、今日この問題に遭遇しました

次の方法でコンテンツを非表示にできます。position：absolute; 左：-999em;
このようにして、スクリーンリーダーとGoogleもそれらを「読み取る」ことができ、選択したドロップダウンが再度表示されたときに表示されます。

私のプルリクエストはこの問題を修正しますが、私の他のものと同様に、選択されたものの多くは無視されています。 このプロジェクトには、コードベースが小さすぎる貢献者が多すぎます。

DelvarWorld、パッチをありがとう。 これは私を悩ませてきました、そして私はちょうど同様の解決策を実装しようとしていて、誰かがすでにそうしているのかどうかを再確認したいと思いました。

テスト後すぐに、これを本番コードにデプロイします。

@DelvarWorldどのプルリクエストを参照していますか？ あなたからのオープンプルリクエストが1つありますが、この問題に対処していません。

@pfillerこのスレッドで上記にリストされているもの、 https：//github.com/DelvarWorld/chosen-hacks/commit/e9501568acae1988ba51b5a29269023d3400db42

cssを使用するよりも重要なのは、Chosenの構築で誤ってキャッシュされた幅を使用する代わりに、結果をレンダリングするときに要素の「現在の」幅を使用することです。

多くの変更があり、それらを自分でマージする最善の方法がよくわかりません。 まもなくマージされたバージョンがありますか？

@bewest私のプルリクエストはそれを行います、ドロップダウンが表示されるたびにそれは要素の幅と一致します

@delvarworld私が知っているのは、正しい区別がなされていることを確認することだけです。

HEADを使用して自動幅ブランチを最新の状態にしてみてください。 8月末頃に同様のチェックアウトからマージしようとしましたが、入力ボックスの幅が間違っています（幅が広すぎて、選択したコンテナの幅がオーバーフローしています）。

私は調べていますが、いくつかの再編成もありました...セットアップメソッドとfinish_setupメソッドを優先してコンストラクターが削除されました。 私もcoffeescriptに精通していないので、この問題に多くの関心があるように思われるので、マージの進行は私のものよりも速く、プルリクエストを送信するよりも速いかもしれません。

実際、私のブランチはその変更を過ぎて分岐し、最終的にはプロトタイプバージョンでの作業をあきらめました。 私のせいで、現時点ではマージできないと思います。

@DevarWorldええ、抽象化の実装にいくつかのビットが入るように、少し作り直す必要があります。 これにより、プロトタイプとjqueryの違いを維持しやすくなります。

もう一度やってみませんか？

丁寧なバンプ...誰かがこれに取り組んでいますか？

選択が非表示になり、幅を計算できないため、選択は機能しません。 CSSの各chznコンポーネントに任意に幅を設定してハックする必要があります。 これは、これがどのように機能するかとは思えません。また、私が見たWebサイトのように、実際には正常に見えません。

私もこの問題に遭遇しました。 結局のところ、要素の幅を取得するために選択したメソッドは、以前のバージョンのjqueryでは壊れています（申し訳ありませんが、正確なバージョン番号はわかりません）。 上記のように、バグは要素が表示されない場合に幅が0を返すことでした。このバグは非常によく文書化されており、回避する方法はたくさんあります。

私たちの解決策は、Jqueryの最新バージョンにアップグレードすることでした。 はい、jqueryを使用した古いコードのパッチとテストを行う必要がありましたが、長期的には多くの問題が修正され、js / css全体で小さなハックの必要性が減ります。

rails jquerygemとjquery-ujsにパッケージ化されている最新のjqueryをインストールしています。 これはまだ古すぎると思いますか？

はい、実際のバージョン番号があればいいのですが。 1.6.2が確認できます
古すぎます。

2011年11月16日水曜日、11：23、ケビンエリオット<
[email protected]

書きました：

rails jquerygemにパッケージ化されている最新のjqueryをインストールしています
およびjquery-ujs。 これはまだ古すぎると思いますか？

@RoyJacobs newestは、リリースされた現在1.7です。

@ RoyJacobs1.6.4を問題なく使用していることを確認できます。

変ですね。 ええ、jquery-railsgemはjQuery1.7を使用しています。 しかし、それはまだ私のために働いていません。

幅のあるレンダリングではないことがわかります。 検査では、計算されたすべての幅が0pxであることが示されています。 これは、.chzn-selectをCSSで、またはselectタグのstyleパラメーターで直接幅を持つように設定した場合でも発生します。

https://skitch.com/kevinelliott/gjufg/winetribe
https://skitch.com/kevinelliott/gjufp/winetribe

確かに迷惑です。 選択はdisplay：none （選択されたjavascriptから推測します）を取得しているようで、幅を正しく計算できないことを想像することしかできません。

考え？

どんな状況でもこれを機能させることができればと思います（強制する必要がある場合でも）。 何も機能していないようです。 私はこれを完全に放棄することを余儀なくされます（そして私は確かにこの壊れたものに再び対処したくありません）。

選択したものにCSS、スタイルシート、またはインラインが適用されていることを確認してください。 スタイルシートを使用して行う場合は、chosen（）を呼び出す前に要素をDOMに挿入する必要があることを意味します。

しかし、私はこれを正しくすることは非常に難しいことに同意します。 CSSを介して選択した選択に幅を適用できるようにしたいと思います。 1つのクラス、1つの幅、pxまたは％。
私のCSSは次のようになります

.example select、.example .chzn-smth {
幅：50％;
}

そして、これは、あなたがどのように、いつ、どこで選んだと呼んでも、幅を正しく適用します。

私はそれをインラインでスタイルシートを介して試しましたが、動作は変わりませんでした。

ライトボックスとアコーディオンにはかなり大きな問題があります。 パッチに取り組んでいる人はいますか？

誰もいないと思います！ 誰にでも使えるのかわからないのでびっくりしました。 私は自分のコンテンツを人為的に隠しているわけでもありません。 selected（）呼び出しがそれを行っているようです。 とても奇妙。

@kevinelliottこの問題を抱えていた人たちは、進むか、修正を見つけたと思います。 私が言ったように、私たちの場合、それは単にjqueryをアップグレードすることの問題でした。 私たちが私たちのスタイルを設定したことも覚えておいてください要素の幅を224pxにし、「display：none;」を設定します。スタイルシートではなく、要素に直接。

これがあなたの助けになり、あなたがそれを機能させることができることを願っています。

リチャードに感謝します。 jQueryをアップグレードしましたが、役に立ちませんでした。 奇妙なことに、選択した要素を非表示にしていません。 選ばれた人はそれを隠しています。 だから私は何が起こっているのかさえわかりません。

@kevinelliottNp 。 私は興味があります、あなたはあなたの幅を設定していますか？要素はまったく？もしそうなら、あなたはパーセンテージまたはピクセルを使用していますか？

わたし。 ピクセルで設定しています。 style属性を使用して要素に直接設定してみました。また、CSSでも試しました。

@kevinelliott正直なところ、私は少し（これを行い、正常に動作します）、および2）選択されたライブラリをステップスルーして、選択された要素を非表示にしているポイントを見つけることです...私たちが問題に遭遇したときも、これをしなければなりませんでした。

申し訳ありませんが、これ以上お役に立てることはありません。

選択した幅が固定されていても、幅が0pxになる場合があります。
理由がわからず、この状況では機能せず、他の人でも機能します...

@tiagobrito ：私はまったく同じ問題を抱えており、修正されたかどうかにかかわらず、それを解決することができませんでした。

@RichardBlairご協力

+
同じ問題を修正してください

@ tiagobrito 、 @ dhampik問題を示す小さな要点をまとめることができますか？

@bewest私はすでに理解しました！ プロジェクトでjquery1.4.xを使用すると追加されます。
次の月曜日は、幅が0pxになる正しいバージョンのjqueryを紹介します。

@bewest私も確認します、
その古いバージョンのjquery（1.6.4より前のバージョンだと思います）
最初は非表示になっているselectのレイアウトを台無しにする
ここに2つのフィドルがあります：
混乱したレイアウト（古いjquery）： http ：
正しいレイアウト（新しいjquery）： http ：

神に感謝します、jqueryのバージョンはYiiフレームワークの新しい次のバージョンで更新されました）

ChosenをTracに統合しようとすると、この問題が発生します。 チケットのプロパティフォームの最初の選択ボックスの幅は0です。プロパティはデフォルトで非表示になっており、リンクをクリックすると展開できます。 jQuery v1.7.1

更新：少なくともfoliotekブログ投稿で言及されているCSSトリックがjQuery 1.7.1で機能しなかったため、この問題を回避しました。 私はまだJSアプローチを試していません。

私の回避策（Tracの場合）：

$("#modify").parent().removeClass('collapsed');
$("#field-test").chosen();
$("#modify").parent().toggleClass('collapsed');

jQuery <= 1.7.1を使用している場合

私はjQueryActualを使用してこの問題を回避しました
selected.jquery.js＃301をから変更し
this.f_width = this.form_field_jq.outerWidth();
に
this.f_width = this.form_field_jq.actual( 'outerWidth' );

//1.7.2コメントのthx

@middayのREADMEによるとjquery.actualこれが唯一の1.7.2より前のjQueryのバージョンのために必要とされます

古いバージョンのjQuery（> = 1.7.1）では、非表示のDOM要素の幅/高さを見つけるのに問題があります。

@middayそれを見つけてくれてありがとう、実際のプラグインを実装した後、それは選択された問題を修正しました

私はまだこの問題を抱えています、それを修正する方法はありますか？

ここでも同じ問題があります-これが何年も続いているとは信じられません...

私もこの問題に遭遇しました。 いくつかの助けが大好きです。

このCSSトリックは機能しているようです。

/* Fix 100% width */
.chzn-container, .chzn-drop, .chzn-drop .chzn-search, .chzn-drop .chzn-search input {
  width: 100% !important;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* Override width */
.chzn-container { width:250px !important; }

@gyopiazza。 それは私にとって問題を解決しました。 ありがとうございました。

FWIW .chzn-container、.chzn-drop、および.chzn-search入力にmin-widthを設定すると（！importantがなくても）、最初に非表示にした選択でも機能することがわかりました。

私の回避策

css：

.chzn-container, .chzn-drop {
    width: 100% !important;
}

html：

select要素に幅を設定する代わりに、元のselect要素にラッパーdivを追加して、ラッパーの幅を設定することを選択します。

Chosenは、計算の試行をオーバーライドする設定された幅で初期化するオプションを提供するようになりました。 これは、初期化ポイントで選択が非表示になっているほとんどのユースケースでおそらく満足のいく回避策です。

$("select").chosen({ width: '50%' });
$("select").chosen({ width: '200px' });
$("select").chosen({ width: '15em' });

この回避策は、おそらくこのバグを修正するために行うことと同じだと思います。 選択を画面の外に移動して測定するコードを含めないようにしたいのです。複雑さが増すからです。

この解決策に基づいてこのバグを閉じることに問題がある人はいますか？

私はバージョン0.9.8を使用していましたが、非表示の選択は正常に機能していました。 今日、私はdo 0.9.14を更新しましたが、動作を停止しました。 私は最小化されたバージョンを使用していました。 通常のバージョンに変更すると、すべてが再び正常に機能します（chosen.jquery.js0.9.14）。 正常ですか？ それは最小化プロセスのエラーですか？

jQueryminまたはフルサイズ0.9.14ではhiddenも機能していません。

新しいオプション「幅」は私のために働いた。 少なくとも、以前は非表示になっていた、新しく選択された入力に対して機能します。

@triswebこれはオープンソースプロジェクトであり、敵意はここでは歓迎されません。 ここには、今日の選択を実現するために多くの時間とエネルギーを費やしてきた多くの人々がいます。 プロジェクトの改善に貢献するか、コメントを控えてください。 ありがとう。

@kenearley私はオープンソースのエチケットを十分に認識しており、コメントをより効果的にするように設計する必要がありました。 申し訳ありません。

とは言うものの、私は本当に時々あなたがすべての騒音を怒鳴る誰かを必要とすると思います。

選択した要素の幅のゼロ値は論理的ではないことを提案します。正しい幅を決定するための信頼できる方法を考案する必要があります。 それができない場合は、妥当なデフォルトを使用する必要があります。自明であるはずの多くの理由から、ゼロは妥当なデフォルトではありません。

それは難しい問題かもしれません、それがこのバグが長い間存在していた理由です、しかし私はいくつかの解決策があると確信しています。 個人的には、新しい「width」属性が問題を解決するとは思いません。これは、従来よりも構成に依存しているため、デフォルトの場合に選択されたゼロ幅が機能しない可能性があるためです。

とは言うものの、私は本当に時々あなたがすべての騒音を怒鳴る誰かを必要とすると思います。

いいえ。「騒音を叫ぶ」必要はありません。 誰かがコードの記述方法について十分に強く感じている場合は、プルリクエストを提供するか、リポジトリをフォークして、必要に応じて変更することができます。

そうは言っても、私はあなたのフォローアップに感謝し、現在の解決策が理想的ではないことに同意します。 今後、より良いソリューションを検討していきますので、これを変更することに関心のある方からのプルリクエストをいただければ幸いです。

@kenearley私はレトリックについてのあなたの意見に丁寧に同意し雄弁です。 これは現時点では私たちにとって苛立たしい問題であるため、適切な解決策が見つかった場合はプルリクエストが来る可能性があります。

：+1：修正のために！

私はChosenに2年近く目を向けてきましたが、それでも最もエレガントなselectUIの改善点です。 しかし、この隠れた問題は依然として大きな問題であり、100％の幅は解決策ではありません。
これを修正するには+1。 選ばれたチームに行きましょう！

修正のための+1

発信者がプログラムで幅を設定できるようにする公式の回避策に加えて、次のスレッドに大まかに基づいて、適切な回避策を提案します。

http://stackoverflow.com/questions/1841124/find-the-potential-width-of-a-hidden-element

回避策は基本的にこの関数に依存しています。

// to be placed anywhere before the jquery.chosen initialization
    var getHiddenOffsetWidth = function (el) {
    // save a reference to a cloned element that can be measured
    var $hiddenElement = $(el).clone().appendTo('body');
    // calculate the width of the clone
    var width = $hiddenElement.outerWidth();
   // remove the clone from the DOM
   $hiddenElement.remove();
   return width;
};

Wichは、jquery.chosenコードの次のmodによって呼び出されます（1.0.0以降）。

AbstractChosen.prototype.container_width = function() {
    if (this.options.width != null) {
        return this.options.width;
    } else {
        return "" + (($(this.form_field).is(":visible"))
            ? this.form_field.offsetWidth
            : getHiddenOffsetWidth(this.form_field)) + "px";
    }
};

詳細については、＃795も参照してください。

クイックフィックス。 代わりに、あなたの隠れのselectします$(elem).chosen(options) 、その後、 $(elem).hide()最初に選択した要素を作成し、それを隠すすなわち。 そうすれば、元のwidthが保持されます。

これはまだ修正されていませんか、3年オープンですか？

この修正の+1

バージョン0.9.8にはこのバグはありませんでした！ 以前はjqueryouterWidthを呼び出して幅を取得していましたが、現在はHTML offsetWidthを使用しており、これによりゼロになります...

彼はそれが回帰であり、有望であることを意味していると私は信じています。 ありましたか
jQueryメソッドから切り替える理由は？

@pfiller jQuery 1.10.2を使用してこの問題が$("select").chosen({ width: '50%' });ソリューションがうまく機能します。 これは、私のユースケースで実行可能な回避策です。

$(this.form_field).outerWidth()を使用して、完全なコードの下にあるオフセット幅を取得します。

AbstractChosen.prototype.container_width = function() {
    if (this.options.width != null) {
        return this.options.width;
    } else {
        return "" + $(this.form_field).outerWidth() + "px";
    }
};

+1私は本当にこの修正が必要です。 デフォルトではフォームを非表示にしているので、ユーザーはボタンをクリックして表示する必要があります。 非表示になっているため、選択範囲の幅が適切に設定されていません

@ henesnarfel- @ pfillerがここに投稿した回避策を使用してみてください： //github.com/harvesthq/chosen/issues/92#issuecomment -18163306

バンプ、問題はまだあります。 これには組み込みのソリューションが必要です。 +1します。

私が考えることができた唯一の回避策は、455行目（少なくとも私のエディターでは）に行くことでした。これは、関数container_widthから次のコードを返します。

return "" + this.form_field.offsetWidth + "px";

と置き換えました

return "" + $(this.form_field).outerWidth() + "px";

問題は消えました。

@ayyashは問題を完全に修正しません。 幅0よりも良くなります。

私にとって、これはトリックをしました（喜びのためにあなた自身のサイズを記入してください）：

/* Fix  width bug */
.chosen-container, .chosen-drop, .chosen-drop .chosen-search, .chosen-drop {
  width: 220px !important;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* Input Box has to be slightly smaller, don't know why and I don't care. */
.chosen-search input {
    width: 210px !important;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* Override width of the whole thing */
.chosen-container { width:220px !important; }

ありがとう

@Thinklabsnkありがとう、素晴らしくて迅速な修正。

編集：これは、選択したすべての要素の幅が同じである場合にのみ機能します。

他のいくつかの提案に基づいて、これに対する私の回避策は次のとおりです。 非表示の入力を複製し、幅を測定するために本体に追加しますが、追加する前にクローンの可視性を非表示に設定して、画面に表示されないようにします。

selected.jquery.jsでこのコード行を見つけます（私のバージョンでは455行目）：

        return "" + this.form_field.offsetWidth + "px";

そしてそれをこれに置き換えます：

        var calculatedWidth = this.form_field.offsetWidth;
        // Fix for zero width on hidden inputs.
        if (0 == calculatedWidth) {
          var clone = this.form_field_jq.clone();
          clone.css("visibility", "hidden");
          clone.appendTo('body');
          calculatedWidth = clone.offsetWidth;
          clone.remove();
        }
        return "" + calculatedWidth + "px";

それがお役に立てば幸いです。

@danjjohnsonありがとう、それはトリックをしました！

唯一のことは、私が変更しなければならなかったことです：

clone.offsetWidth; 

に

clone.outerWidth();

何らかの理由で、clone.offsetWidthが未定義の値を与えていました。

よろしくお願いします、

このバグはFirefoxで発生し、Chromeなどでテストすることはありません。

1枚目の画像（上）
スクロールバーがあるのにないので、選択したセット幅。 これは正しくない結果です。

2番目の画像（中央）
最初の画像のようにスクロールバーがあるので設定幅を選択しましたが、今回は正しいスクロールバーがあります。

3番目の画像（下）
これは、スクロールバーがない場合の最初の画像の状態です。 このテストでは、選択した幅をwidth: 100% !important

：サムズアップ：■変更@danjjohnsonのための「@johnmercedでの修正」

私は別の修正があり、シンプルで機能します。 のポイントは、幅がゼロにならないようにします。

   // don't let the width to be "0"
   $(".chosen-select,.chosen-multiple-select").each(function(){
        if($(this).width() == 0){
            $(this).width(240);
        }
    });
    // call it :)
    $(".chosen-select,.chosen-multiple-select").chosen({allow_single_deselect:true});

ハロー、
この問題に対する私の解決策は、これまでに投稿された解決策（1.2.0を選択）の組み合わせです。

    AbstractChosen.prototype.container_width = function () {
        if (this.options.width != null) {
            return this.options.width;
        } else {
            //Original:
            //return "" + this.form_field.offsetWidth + "px";
            //Workaround:
            if(this.form_field.offsetWidth > 0) {
                return "" + this.form_field.offsetWidth + "px";
            } else {
                if($(this.form_field).css('width')) {
                    return parseInt($(this.form_field).css('width'),10) + "px";
                } else {
                    return "" + $(this.form_field).outerWidth() + "px";
                }
            }
        }
    };

非表示の選択に対して静的なcss-widthをpxで定義するだけです。

全体的な修正が必要です。

ここでの問題は、ウィンドウのサイズを変更すると、選択が常に初期化されたのと同じサイズで表示されることです。 非表示の場合の初期化時に必要な幅を推測するよりも、表示時またはウィンドウのサイズ変更時に選択のサイズを変更する方がよいと思います。

選択したオブジェクトのサイズを動的に変更する方法はありませんか？ サイズを変更するタイミング（イベントのサイズ変更やonShowなど）がわかっているので、回避策になる可能性があります。 選択したオブジェクトのサイズを変更するAPI関数はありますか？ または、どういうわけか再初期化しますか？

：+1：修正用。 今日これに出くわした

：+1：これを追跡するのに多くの時間を浪費しました。

モーダルのサイズにまだ問題があります。 4.0リリースで修正する予定はありますか？

@danjjohnson最初の要素が他の要素よりもはるかに小さい場合、修正しても問題は修正されません

@danjjohnsonに基づいて

ハック

行を見つける

return "" + this.form_field.offsetWidth + "px";

と置換する

var calculatedWidth = this.form_field.offsetWidth;
          // Fix for zero width on hidden inputs.
          if (0 == calculatedWidth) {
              var clone = this.form_field_jq.clone();
              clone.css({"left": 10000, "position": "fixed"});
              clone.appendTo('body');
              calculatedWidth = clone.outerWidth();
              clone.remove();
          }
          return "" + calculatedWidth + "px";

$（ 'select'）。chosen（{width： '100％'}）; @pfillerによって

ありがとう

プロジェクトディレクトリにアセットを読み込めないので、choose-searchクラスを削除するにはどうすればよいですか？

まだレンダリングされていないテンプレートから静的選択をロードするときに、タイムアウトを追加する必要がありました。 初期化を試みたときに、階層内にメトリックがあったものはありませんでした。 ゼロタイムアウトでラップすると、少なくとも初期化がイベントキューの最後にぶつかります。

// Found this in chosen.jquery.js and patched it as follows
AbstractChosen = (function () {
    function AbstractChosen(form_field, options) {
        if (!AbstractChosen.browser_is_supported()) {
            return;
        }

        var self = this;
        window.setTimeout(function () {
            self.form_field = form_field;
            self.options = options != null ? options : {};
            self.is_multiple = self.form_field.multiple;
            self.set_default_text();
            self.set_default_values();
            self.setup();
            self.set_up_html();
            self.register_observers();
        }, 0);
    }

私はこのバグに噛まれたばかりで、100％問題を修正してくれました。

@harvesthqこれを修正するプルリクエストを受け入れますか？ まだ最善の解決策はわかりませんが、修正してプルリクエストを作成させていただきます：heart：

このための強力な回避策は、ng-showの代わりにng-ifを使用することです。 完璧に動作し、シンプルです。

私は、ng-ifが多くの状況で好まれる選択であることを理解しました。 壊れたng-selectを修復するだけでなく、再帰的なコントローラーを許可します（ng-if、ng-controller、ng-init、およびng-templateの組み合わせを使用）。

したがって、この4年前の問題はまだ解決されていないようです？！？！

+1

その間に+1 ...私はselect2を使用しています

選択した選択リストをクリックしたときに領域内のスピナーを拡張する方法はありますか？データが選択したjqueryに追加されている間に発生する必要があります。 選択したjqueryに膨大な数のレコードを処理していますが、それらを処理して表示するには時間がかかります。 ??

なんて壮大な5年のバグ...そしてまだ人々を噛んでいる（痛い！）。

Googleには、非表示のdivに正しく表示されないマップに関する同様のバグがあります。 ただし、これらの問題には両方とも、実装が簡単な回避策があります。

はい、昨年IIRCでグーグルマップのバグに遭遇しましたが、このレポートを見つける前に、半日かけてさまざまなことを罵倒して試した人は何人いますか？ 人気のあるライブラリにあるこのようなバグは、時間を浪費します。 毎年これらの図書館のいずれかを学んでいる人々の数に掛けて、総費用はおそらく驚異的です...彼らがそれを修正するつもりがなければ、それは大丈夫です。 この時点で修正すると、展開されている多数の回避策と奇妙に相互作用する可能性があります...その場合、修正していないことを認め、ドキュメントのどこかに回避策を文書化して、人々が苦労しないようにする必要があります（またはミス）このようなものの締め切り。

私の「全体的な」修正は他の修正と似ており、マークアップ内のすべての選択の幅が親divの100％であると想定しています。 私たちはブートストラップを使用しているので、これが当てはまります。

ページの読み込み時に.chosen（）を初期化した直後に、このコードを実行します。

`` `
$（ "。chosen-container"）。each（function（i、elem）{
if（$（elem）.width（）== 0）{
$（elem）.width（ "100％"）;
}
}）;
「」

要素が最初にcssの非表示コンテナ内にあり、次に表示されたときに幅が0pxであるという問題を抱えていた方には、私が見つけた修正はjsconfigで幅を設定することでした。

var config = { '.chosen-select' : {}, '.chosen-select-width' : {width:"95%"} } for (var selector in config) { $(selector).chosen(config[selector]); }

次に、select入力にcssクラスchoose-select-widthを指定しました

<select name="f01" class="chosen-select-width" id="item_select_staff">

選択したv1.6.2とjqueryバージョン3.1.1でトリックを実行するように見えました。

デフォルトで選択した幅オプション（自動）をそのままにして、追加します

.chosen-container { min-width:5em; }

私のサイトのCSSに（必要に応じて最小幅を調整します）。 これにより、可能な場合は選択の理想的な幅に合わせながら、0px（または使用するには小さすぎる）になることはありません（他のコンテンツとインラインで選択した要素がある場合、100％の幅などを強制すると、うまく機能しません。メソッドは、コアの問題に対処するだけでなく、インライン選択要素を可能にし、最も単純で最も単純な実装を提供しているように見えます）。

これは7年経ってもまだどのように壊れていますか？

ブートストラップ3を使用した私のworkarondは、次のスタイルを追加しています。

.chosen-container {
    min-width: 90%;
}

ブートストラップ3を使用した私のworkarondは、次のスタイルを追加しています。

.chosen-container {
    min-width: 90%;
}

購入してもドロップダウンが表示されない.... @ koenvanderlinden

すでに文書化されています
https://harvesthq.github.io/chosen/options.html
widthオプションとその説明を確認してください

@qbadevこれにより、要素が必要なときにコンテンツに合うサイズにならないようになりますが、それが修正されたとは思いません（特に、min-widthを使用すると、これよりも良い結果が得られます）。

ドキュメントの説明は、事実上、バグ（解決可能であるはずです）を呼び出し、バグの潜在的な回避策としてそれを使用することに言及しています。

@koenvanderlindenはmin-width:90%;推奨しているので、通常は90％の幅で、選択の内容で必要な場合は100％の幅になります。 繰り返しになりますが、私はまだmin-width:5em; （ユースケースによって異なる正確なem値）を選択するので、小さすぎることはありませんが、親に基づいてサイズを変更するのではなく、選択の内容に合わせて拡張しようとしますエレメント。

@KZeni私はそれが修正だとは言いませんでした。 文書化されたばかりです。 そしてそれは素晴らしい解決策です。 私の主な問題は、初期化後、選択された幅がほぼ0であったことでした。 これで、「修正」後、親要素に適用されたCSSクラスを使用して、選択されたものを確認し、好きなように処理できます。

これまで何度もこのような問題に直面しましたが、オブジェクトの幅が0であるため、計算できませんでした。 各アプリケーションが異なるため、普遍的な方法で解決することはできません。
したがって、選択したものが初期化の瞬間に表示されている場合、アクションは必要ありませんが、非表示になっている場合は、 widthオプションを使用するのが使用方法です。

カスタム幅のサポート
Chosenでカスタム幅を使用するのは、Chosenを作成するときにオプションを渡すのと同じくらい簡単です。
$(".chosen-select").chosen({width: "95%"});

https://harvesthq.github.io/chosen/

jQueryを1. *から3. *リリースにアップグレードした後、この問題が見つかりました。
それを解決しました：

selected.jquery.js：543
AbstractChosen.prototype.container_width = function（）{
return this.form_field.offsetWidth + "px";
->
return $(this.form_field).outerWidth() + "px";