jQuery Chosen div отстает от Twitter Bootstrap accordion

Я использую плагин jQuery Chosen внутри аккордеона Twitter Bootstrap. Проблема, которая у меня есть, заключается в том, что выпадающее меню выбранного плагина появляется " под " div меню аккордеона. Я попытался установить z-index на более высокое значение,но это не помогло.

Я привел пример своей задачи: http://jsfiddle.net/8BAZY/1/

Если вы нажмете на поле select, то увидите, что под полем div появится меню. Как я могу позволить выпадающему списку появиться на вершине аккордеон див, чтобы я мог видеть все результаты?

9 9
html css jquery twitter-bootstrap jquery-chosen

9 ответов:

Проблема в том, что .collapse имеет overflow: hidden. Очевидно абсолютно позиционированный выбранный выпадающий список будет обрезан. - dfsq 2 дня назад

4

Более подробная информация об этом выбранном вопросе находится здесь https://github.com/harvesthq/chosen/issues/86

Одно решение, основанное на предложениях, приведенных на этой странице PilotBob http://jsfiddle.net/8BAZY/6/ 

$(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", "");
        });
});

Спасибо.

6

Решение, опубликованное Судиром, сработало для меня, за исключением одной незначительной проблемы: когда у вас есть более одного выбранного элемента управления внутри div, и вы расширяете другой выбранный, в то время как один уже расширен, новый будет отставать от аккордеона. Это происходит потому, что первый раскрывающийся список устанавливает переполнение скрытым после того, как второй раскрывается. Вот в чем проблема.

$(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", "");
   });
}
6

Это не элегантно, но вы можете сделать это так: 

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

Это гарантирует, что он будет обрезан, когда свернут, и виден, когда показан.

5

У меня была аналогичная проблема с выбранным select, получающим ширину 0px, когда я использовал его в элементе Bootstrap collapse. Это было легко исправить, добавив width:100%!important; к элементу .chosen-container в моем CSS.

3

Изменение выбрано.минута.css или избранный.css: 

.chosen-container{position:relative;

Кому: 

.chosen-container{position: fixed;

Это работает на меня.

3

Я просто исправил это с помощью строки css: 

div.chosen-container-active{
    z-index:9999;
}
2

Для новых версий 

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

Для старых версий 

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

Это сработало для меня "chosen1. 3" и "bootstrap3.1", это решение может нуждаться в некоторых соображениях, но я не столкнулся ни с какими проблемами. Пожалуйста, прочитайте больше https://github.com/harvesthq/chosen/issues/86

1

Я исправляю это, помещая overflow: auto на родительский

0