jQuery Chosen div отстает от аккордеона Twitter Bootstrap

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

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

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


html jquery css twitter-bootstrap jquery-chosen
person w00    schedule 16.02.2013    source источник
comment
это какой-то конфликт с twitter-bootstrap... если вы прокомментируете js-скрипт начальной загрузки, вы не получите этого...   -  person henser    schedule 17.02.2013
comment
Проблема в том, что у .collapse есть overflow: hidden. Очевидно, абсолютно позиционированное выбранное раскрывающееся меню будет обрезано.   -  person dfsq    schedule 17.02.2013
comment
@dfsq Ты прав. Кажется, это работает, когда я удаляю overflow: hidden. Это также, кажется, не дает никакого нежелательного поведения. Не могли бы вы добавить это как ответ?   -  person w00    schedule 17.02.2013
comment
Я задал аналогичный вопрос с той же проблемой: stackoverflow.com/questions/14043673/   -  person Pigueiras    schedule 17.02.2013

Ответы (10)


arrow_upward
5
arrow_downward

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

person Calvin    schedule 19.02.2013

arrow_upward
6
arrow_downward

Дополнительная информация по выбранной проблеме находится здесь 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", "");
        });
});

Спасибо.

person Sudhir    schedule 15.03.2013
comment
FWIW, вместо этого я перешел к использованию select2. - person Sudhir; 03.04.2013

arrow_upward
6
arrow_downward

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

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

Это гарантирует, что он обрезается при сворачивании и становится видимым при отображении.

person tjdecke    schedule 25.04.2013

arrow_upward
6
arrow_downward

Решение, опубликованное Sudhir, сработало для меня, за исключением одной небольшой проблемы: когда у вас есть более одного выбранного элемента управления внутри 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", "");
   });
}
person Zeeshan Ali    schedule 27.01.2014
comment
Я добавил еще несколько строк и заставил его работать на меня. Спасибо +1 - person Si8; 08.10.2015

arrow_upward
3
arrow_downward

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

person Glen    schedule 20.02.2015
comment
У меня была такая же проблема, но внутри вкладки начальной загрузки. Ваше решение работает для меня. Спасибо. - person Silvio Delgado; 21.03.2017

arrow_upward
3
arrow_downward

Измените selected.min.css или selected.css :

.chosen-container{position:relative;

To :

.chosen-container{position: fixed;

Меня устраивает.

person EngineerCoder    schedule 25.02.2015

arrow_upward
2
arrow_downward

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

div.chosen-container-active{
    z-index:9999;
}
person Javases    schedule 09.03.2014

arrow_upward
1
arrow_downward

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

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

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

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

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

person Alireza Fattahi    schedule 18.02.2015

arrow_upward
0
arrow_downward

Я исправляю это, добавляя overflow: auto к родителю.

person yodann    schedule 10.06.2015

arrow_upward
0
arrow_downward

Просто это сработало для меня:

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

Я не изобретал его сам, получил решение через https://github.com/harvesthq/chosen/issues/86

person leo    schedule 15.08.2020