it-swarm.com.ru

Раскрывающийся список начальной загрузки ограничен переполнением: скрытый контейнер, как изменить контейнер?

Используя bootstrap, у меня есть раскрывающееся меню (s) внутри div с overflow:hidden, которое должно быть таким. Это привело к обрезке выпадающих списков контейнером.

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

это пример кода: http://jsfiddle.net/0y3rk8xz/

30
AlBaraa Sh

если кто-то заинтересован в том, чтобы обойти это, выпадающий список начальной загрузки имеет событие 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/

28
Conrad Warhol

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

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

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

6
Guru

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

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

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

2
Jacob Colvin

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

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

$('.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");
  }
2
Chait

У меня была какая-то проблема прокрутки с большинством решений в этом и других вопросах, которые я видел в 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/

2
Helder Pereira

Я столкнулся с той же проблемой, с необходимостью установить 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.

0
mikeapr4

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

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

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

});
0
Simsek Mert

У меня был элемент div с классом Bootstrap panel, содержащим 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>

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

0
Dov Miller