Выпадающее меню Bootstrap, скрытое за другими элементами

Question

У меня проблема, похожая на this. Но решения для моей проблемы не работают. И эта дискуссия была закрыта для дальнейших предложений. К сожалению, я не могу показать свой код точно так же, как на jsfiddle. Однако проблема - это что-то вроде this. При попытке расширить раскрывающийся список в первом разделе панели, выпадающий список скрывается за другими элементами. Я потратил несколько часов на различные предложения, касающиеся «контекста укладки», «позиции» и «z-index». Я был бы очень признателен, если бы кто-нибудь мог указать мне на любые ресурсы, которые могли бы помочь.

<div class="btn-group"> 
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span data-bind="label">Select One</span>&nbsp;<span class="caret"></span> 

        </button> 
        <ul class="dropdown-menu" role="menu"> 
         <li><a href="#">Item 1</a> 
         </li> 
         <li><a href="#">Another item</a> 
         </li> 
         <li><a href="#">This is a longer item that will not fit properly</a> 
         </li> 
        </ul> 
       </div> 

Answer 1

У вас есть два варианта. Вы можете сделать переполнение контейнера в соответствии с содержимым, установив «переполнение: авто» в css родителя.

FIDDLE DEMO

.panel-body { /* parent container of the menu */ 
    overflow:auto; 
} 

Или вы могли бы сделать что-то функционально с JavaScript, чтобы обрабатывать размещение меню. Этот вариант немного «взломан» и потребует дальнейших улучшений. Вам нужно будет улучшить его, чтобы одновременно открывать сразу несколько меню на одной странице, и вам нужно будет улучшить способ выбора этого меню. Вы также можете добавить поддержку прокрутки для перемещения меню с помощью целевого элемента, если это не проблема. Вот скрипка:

FIDDLE DEMO

(function() { 
    // hold onto the drop down menu            
    var dropdownMenu; 

    // and when you show it, move it to the body          
    $(window).on('show.bs.dropdown', function(e) { 

    // grab the menu   
    dropdownMenu = $(e.target).find('.dropdown-menu'); 

    // detach it and append it to the body 
    $('body').append(dropdownMenu.detach()); 

    // grab the new offset position 
    var eOffset = $(e.target).offset(); 

    // make sure to place it where it would normally go (this could be improved) 
    dropdownMenu.css({ 
     'display': 'block', 
     'top': eOffset.top + $(e.target).outerHeight(), 
     'left': eOffset.left 
    });             
    }); 

    // and when you hide it, reattach the drop down, and hide it normally             
    $(window).on('hide.bs.dropdown', function(e) {   
    $(e.target).append(dropdownMenu.detach());   
    dropdownMenu.hide();        
    });             
})(); 

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

К сожалению, я бы предложил изучить параметры «Вики Javascript», которые загружают загрузочные файлы, но, видимо, у них нет возможности установить целевой элемент append. Было бы неплохо иметь возможность добавляемого меню на какой элемент вы хотите, как и большинство других своих элементов: Bootstrap Docs

---

EDIT

Как @Andrea Pizzirani упоминался, вам может попытаться удалить css для меню абсолютного позиционирования, но я бы не рекомендовал его! Это испортит все другие экземпляры меню, если вы не добавите другой css, чтобы ограничить область изменений. Кроме того, если вы хотите, чтобы меню располагалось под кнопкой, вам придется переделать CSS, который уже загрузился.

Все еще, если это работает, и вы не беспокоитесь о том, чтобы испортить все другие меню, это может быть решение, которое вы искали. Heres скрипку демонстрирует решение:

FIDDLE DEMO

dropdown-menu {} 

---

EDIT я, наконец, нашел место, где я первоначально нашел это решение.Gotta дать кредит где credit is due!

Answer 2

Попробуйте удалить позиция: абсолютная; от:

dropdown-menu {} 

и поместите меню под кнопкой по CSS.