Bootstrap Modal - авто высота

Question

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

Как установить высоту модальности в этой ситуации, чтобы все выпадающие элементы были видимыми и избавились от этой полосы прокрутки?

Answer 1

Просто добавьте эти два правила (!important только здесь из-за SO фрагментах, не нужно):

.modal { overflow: visible !important; } 
 
.modal-body { overflow-y: visible !important; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script> 
 
<link href="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<!-- Button to trigger modal --> 
 
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> 
 
    
 
<!-- Modal --> 
 
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
 
    <div class="modal-header"> 
 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
 
    <h3 id="myModalLabel">Modal header</h3> 
 
    </div> 
 
    <div class="modal-body"> 
 
    <div class="dropdown"> 
 
     <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger <span class="caret"></span></a> 
 
     <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 
 
      <li><a href="#">Foo</a></li> 
 
      <li><a href="#">Bar</a></li> 
 
      <li><a href="#">Baz</a></li> 
 
      <li><a href="#">Foo</a></li> 
 
      <li><a href="#">Bar</a></li> 
 
      <li><a href="#">Baz</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    <div class="modal-footer"> 
 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
 
    <button class="btn btn-primary">Save changes</button> 
 
    </div> 
 
</div>

Answer 2

Вы просто добавить класс, имеющий z-index как атрибут, имеющий более чем модель коробки сноске.

Для того чтобы z-index работал, вы также должны установить положение = относительное, абсолютное или фиксированное. Также может помочь z-index примерно 5000. . (Модальный может иметь г индекс выше, чем в 2000-х годах

так в вашем CSS я хотел бы добавить следующее:

.class-of-dropdown { 
    position: relative; 
    z-index: 5000; 
} 

класс .modal тело имеет переполнение-у:. Авто собственности Вы, возможно, потребуется изменить это:

.modal-body { 
    overflow-y:visible; 
}