Chosen: ブートストラップ3.xダイアログで適切にスタイリングしないことを選択しました。

作成日 2017年05月31日  ·  6コメント  ·  ソース: harvesthq/chosen

ここに問題を要約してください。
ブートストラップ3.xダイアログで適切にスタイリングしないことを選択しました。

再現する手順

ブートストラップのcssをロードします
ロードロードダイアログ。
ダイアログを開く

さらに、再現を試みることができるように、問題を示す作業デモにリンクしてください。 このテンプレートをベースとして使用できます。 または、選択したデモページに問題がます

予想される行動

見事なスタイルで検索可能なドロップダウンを表示する

実際の動作

どうぞ
image

環境

  • 選択されたバージョン
    selected_v1.6.2 /

  • jQueryまたはプロトタイプバージョン
    /jquery/1.11.2/jquery.min.js '

  • ブラウザとバージョン
    Mozilla / 5.0(Windows NT 10.0; WOW64; rv:53.0)Gecko / 20100101 Firefox / 53.0

  • OSとバージョン
    ウィンドウズ10

追加情報

該当なし

最も参考になるコメント

わかりました、これに更新を追加するだけです。
初期化メソッドで幅を渡すと、上記のハックなしですべて機能します。

$("select").chosen({
                search_contains : true, // kwd can be anywhere
                max_selected_options: 1,
                max_shown_results : 5, // show only 5 suggestions at a time
                width: "95%",
                no_results_text: "Oops, nothing found!"
            } );

全てのコメント6件

選択した1.6.2は最新バージョンではありません—最新リリースバージョンでまだ問題がありますか?

私はそれを持っていることを確認し、あなたに知らせます。

はい、最新の1.7バージョンでも問題は解決していません。

私はいくつかのstackoverflowトピックをチェックし、この修正を思いついた。

$('.modal').filter('[class*=_dialog]').on('show.bs.modal', function () {
                // This makes the dialog expand when shown in a bootstrap dlg
                $(this).find('.chosen-container').css({width: "100%"});
            });

アプリはカスタムでクライアント向けであり、アプリへのリンクを提供することはできません。

わかりました、これに更新を追加するだけです。
初期化メソッドで幅を渡すと、上記のハックなしですべて機能します。

$("select").chosen({
                search_contains : true, // kwd can be anywhere
                max_selected_options: 1,
                max_shown_results : 5, // show only 5 suggestions at a time
                width: "95%",
                no_results_text: "Oops, nothing found!"
            } );

@lordspaceをハックしてくれてありがとう。 あなたの修正を見つけるのにかなりの時間がかかりました。

この問題が「bootstrap-chosen」リポジトリ(https://github.com/alxlit/bootstrap-chosen/issues/54)でクローズされた理由がわかりません。

心配ない。 オプションで修正できるのであればバグではないと思って閉じたのかもしれませんが、今考えてみると、箱から出してすぐに動作するはずです。

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