10

TwitterBootstrapアコーディオン内でjQueryChosenプラグインを使用しています。私が抱えている問題は、Chosenプラグインのドロップダウンメニューがdivアコーディオンメニューの「下」に表示されることです。をより高い値に設定しようとしましz-indexたが、うまくいきませんでした。

私は自分の問題の例を作りました：http：//jsfiddle.net/8BAZY/1/

ボックスをクリックするselectと、メニューが。の下に表示されますdiv。ドロップダウンをアコーディオンdivの上に表示して、すべての結果を表示するにはどうすればよいですか？

4

10 に答える 10

6

この選択された問題の詳細については、 https：//github.com/harvesthq/chosen/issues/86をご覧ください。

PilotBobhttp : //jsfiddle.net/8BAZY/6/によってそのページで与えられた提案に基づく1つの解決策 

$(function() {
    var els = jQuery(".chzn-select");
    els.chosen({no_results_text: "No results matched"});
    els.on("liszt:showing_dropdown", function () {
            $(this).parents("div").css("overflow", "visible");
        });
    els.on("liszt:hiding_dropdown", function () {
            $(this).parents("div").css("overflow", "");
        });
});

ありがとう。

于 2013-03-15T07:51:09.197 に答える
6

エレガントではありませんが、次のように実行できます。

#collapseOne {
    overflow: hidden;
}
#collapseOne.in {
    overflow: visible;
}

これにより、折りたたんだときにクリップされ、表示されたときに表示されるようになります。

于 2013-04-25T14:21:00.787 に答える
6

Sudhirによって投稿された解決策は、1つの小さな問題があったことを除いて、私のために機能しました。これは、最初のドロップダウンが2番目のドロップダウンが展開された後にオーバーフローを非表示に設定するためです。これが修正です。

$(function () {
   fixChoosen();
});

function fixChoosen() {
   var els = jQuery(".chosen-select");
   els.on("chosen:showing_dropdown", function () {
      $(this).parents("div").css("overflow", "visible");
   });
   els.on("chosen:hiding_dropdown", function () {
      var $parent = $(this).parents("div");

      // See if we need to reset the overflow or not.
      var noOtherExpanded = $('.chosen-with-drop', $parent).length == 0;
      if (noOtherExpanded)
         $parent.css("overflow", "");
   });
}
于 2014-01-27T08:00:58.723 に答える
5

問題は、があるため.collapseですoverflow: hidden。明らかに、絶対に配置された選択されたドロップダウンはクリップされます。–dfsq2日前

于 2013-02-19T00:44:31.077 に答える
3

ブートストラップ折りたたみ要素内で使用しているときに、選択した選択で幅が0pxになるという同様の問題がありました。これは、CSSwidth:100%!important;の要素に追加することで簡単に修正できました。.chosen-container

于 2015-02-20T00:28:59.213 に答える
3

selected.min.cssまたはchosen.cssを変更します：

.chosen-container{position:relative;

に ：

.chosen-container{position: fixed;

わたしにはできる。

于 2015-02-25T23:40:18.953 に答える
2

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

div.chosen-container-active{
    z-index:9999;
}
于 2014-03-09T22:11:42.670 に答える
1

新しいバージョンの場合

.chosen-drop {
    z-index: 999999 !important;
}

古いバージョンの場合

.chzn-drop {
    z-index: 999999 !important;
}

これは私にとって「chosen1.3」と「bootstrap3.1」で機能しました。このソリューションにはいくつかの考慮事項が必要な場合がありますが、問題は発生しませんでした。続きを読むhttps://github.com/harvesthq/chosen/issues/86

于 2015-02-18T07:34:44.840 に答える
0

親にoverflow：autoを置くことでこれを修正します

于 2015-06-10T05:33:40.950 に答える
0

単にこれは私のために働いた：

.chosen-container.chosen-with-drop .chosen-drop {
    position: relative;
}

私はそれを自分で発明したのではなく、 https：//github.com/harvesthq/chosen/issues/86から解決策を入手しました

于 2020-08-15T09:37:27.510 に答える