Выпадающее окно Bootstrap, обрезанное переполнением: скрытый контейнер, как изменить контейнер?

Ответ 1

если кто-то заинтересован в том, чтобы обойти это, выпадающий список начальной загрузки имеет событие show.bs.dropdown, которое вы можете использовать для перемещения выпадающего элемента за пределы контейнера overflow:hidden.

$('.dropdown').on('show.bs.dropdown', function() {
  $('body').append($('.dropdown').css({
    position: 'absolute',
    left: $('.dropdown').offset().left,
    top: $('.dropdown').offset().top
  }).detach());
});

также есть событие hidden.bs.dropdown, если вы предпочитаете переместить элемент обратно туда, где он находится после закрытия раскрывающегося списка:

$('.dropdown').on('hidden.bs.dropdown', function() {
  $('.bs-example').append($('.dropdown').css({
    position: false,
    left: false,
    top: false
  }).detach());
});

Вот рабочий пример:

http://jsfiddle.net/qozt42oo/32/

Ответ 2

Измените свойство div на overflow:visible; или установите Position:absolute; на класс .dropdown, например

.bs-example .dropdown{position:absolute;}

См. Рабочий код: http://jsfiddle.net/guruWork/3x1f8ng5/

Ответ 3

Я столкнулся с той же проблемой и после поиска часов. Я создал обработчик событий, чтобы поймать выпадающий список и получить позиции и прикрепить его динамически. так что он не обрезается.

Вот простой код, который я использовал. Попробуйте, если это поможет.

$('.dropdown-toggle').click(function (){
     dropDownFixPosition($('button'),$('.dropdown-menu'));
 });
 function dropDownFixPosition(button,dropdown){
    var dropDownTop = button.offset().top + button.outerHeight();
    dropdown.css('top', dropDownTop + "px");
    dropdown.css('left', button.offset().left + "px");
  }

Ответ 4

У меня была какая-то проблема с прокруткой с большинством решений в этом и других вопросах, которые я видел на SO. Что сработало для меня, это сделать выпадающее положение inherit:

.dropdown {
  position: inherit;
}

И затем установите позицию dropdown-menu с помощью JavaScript:

$(document).on("show.bs.dropdown", function () {
  var dropdownToggle = $(this).find(".dropdown-toggle");
  var dropdownMenu = $(this).find(".dropdown-menu");
  dropdownMenu.css({
    "top": (dropdownToggle.position().top + dropdownToggle.outerHeight()) + "px",
    "left": dropdownToggle.position().left + "px"
  });
});

Вот рабочий пример: http://jsfiddle.net/ck66ee9q/

Ответ 5

Мое решение состояло в том, чтобы использовать статическое позиционирование в раскрывающемся списке. У меня было выпадающее меню внутри загрузочной таблицы с скрытым переполнением.

<div class="table" style="overflow: hidden;">
  <div class="dropdown" style="position: static;">
    <div class="dropdown-menu">...</div>
  </div>
</div>

Ответ 6

Я столкнулся с той же проблемой, когда мне нужно установить overflow:hidden, но при этом выпадающее меню не будет обрезано.

Однако моя ситуация связана с Bootstrap Carousel, поэтому я решил, что действительное решение сделает переполнение видимым только тогда, когда раскрывающийся список открыт, и когда он закрывается, переполнение может вернуться к скрытому. Это решение может работать для других, поэтому я делюсь им.

$('.dropdown-toggle').click(function() {
  var $container = $(this).parent('.carousel-inner');
  $container.css('overflow','visible');
  $(document).one('click', function() {
      $container.css('overflow','');
  });        
});

Обратите внимание: это не проверяет ключ Esc, который используется для закрытия раскрывающегося списка, но в моем случае это не было проблемой. Моя собственная версия использует класс для применения стиля, который некоторые разработчики могут предпочесть вместо изменения встроенного CSS.

Ответ 7

У меня был элемент div с классом panel Bootstrap, содержащим DevExpress ComboBoxes содержащиеся в элементах div с классами Bootstrap col-lg.

У меня была проблема с цветом фона panel или окраской границы цвета в div выше. Чтобы решить эту проблему, я добавил overflow:hidden; к panel но это вызвало отключение выпадающего списка ComboBox. Я добавил style="position: inherit" к тем элементам div на panel содержат ComboBox, и это решило проблему.

<div class="col-sm-12" style="position: inherit">
<div class="col-sm-4" style="position: inherit">
 <dx:aspxComboBox></dx:aspxComboBox>
</div>
</div>

Это решение я нашел здесь.

Ответ 8

У всех предложений, которые были сделаны здесь, есть какие-то недостатки, и я не мог заставить их работать должным образом. Так что я сделал это на основе всех предложений и прекрасно работает для меня.

Я использовал другой класс, чтобы отличать его от обычных выпадающих элементов, и я бы хотел, чтобы они работали обычным образом.

$(document).on("show.bs.dropdown", ".dropdown.my-body-dropdown", function () {

    //original dropdown element
    var thisDropdown = $(this);

    //make a deep clone
    var thisDropdownCopy = thisDropdown.clone(true, true);

    //append to the body with a different class which is my-modified-dropdown here 
    //and open which will make dropdown menu show up
    $("body").append( thisDropdownCopy.addClass("my-modified-dropdown open").css({ "position": "absolute", "left": thisDropdown.offset().left, "top": thisDropdown.offset().top }).detach() );

    //hide the original dropdown element
    $(this).hide();

})
.on("hidden.bs.dropdown", ".dropdown.my-body-dropdown", function() {

    //remove modified dropdowns
    $(".dropdown.my-body-dropdown.my-modified-dropdown").remove();

    //show original dropdowns
    $(".dropdown.my-body-dropdown").show();

});

Ответ 9

Вы также можете попробовать это, заменив yourDivId идентификатором вашего div.

$('.dropdown').on('show.bs.dropdown', function() {
    $('#yourDivId').css('overflow-x', 'visible');
});

$('.dropdown').on('hidden.bs.dropdown', function() {
    $('#yourDivId').css('overflow-x', 'hidden');
});

Ответ 10

Изменение контейнера возможно с помощью jQuery, например. $(".dropdown").insertAfter(".bs-example");

Смотрите этот код, например: https://jsfiddle.net/SolveItSimply/pwmyvsw6/

Я не рекомендую это, поскольку, поскольку вы потеряете какую-либо полезность позиционирования Bootstrap и сохраните выпадающие элементы в порядке, будет беспорядочно.

Вместо этого вы можете использовать overflow:visible вместе со "скрытым" классом в своих интересах, скрывая любой элемент, который переполняется JavaScript. Вот пример: http://jsfiddle.net/SolveItSimply/z14c210x/

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

Ответ 11

Я не мог установить контейнер overflow:visible, но вставка

<div class="clearfix" />

ниже блока, содержащего Dropdown, решена проблема для меня.

Ответ 12

Просто измените значение переполнения на visible.