bootstrap modal overflow issue

Question

У меня есть Bootstrap modal с кнопкой. Когда я нажимаю кнопку, она отображается под кнопкой. Содержит список ul с привязными ссылками в нем.

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

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

CSS-за:

.wrapper-for-dropdown { 
width: 300px; 
z-index:9999; 
color: #333; 
background-color: #fff; 
position: absolute; 
display: none; 
border: solid; 
border-width: 1px; 
border-radius: 4px; 
border-color: #ccc; 
z-index:32432423432; 
overflow-wrap:normal; 
} 

.wrapper-for-dropdown:hover { 
    border: solid; 
    border-width: 1px; 
    border-color: #ccc; 
} 
.dropdown-ul { 
list-style-type: none; 
-moz-st color: white; 
text-align: left; 
padding-left: 10px; 
overflow-y: visible; 
} 
.dropdown-ul li { 
float: left; 
display: inline-block; 
height: auto; 
width: 250px; 

} 
.dropdown-ul li:hover { 
} 
.dropdown-ul li a { 
    color: #38546d; 
    display: block; 
    float: left; 
} 

.dropdown-ul li a:hover { 
     color: black; 
     display: block; 
     float: left; 
    } 

HTML: 

<!-- Modal --> 
      <div class="modal" id="modalCreateNewManualResync" tabindex="-1" role="dialog" aria-labelledby="modalCreateNewManualResyncLabel" aria-hidden="true"> 
       <div class="modal-dialog" id="createNewSyncDialog"> 
        <div class="modal-content" style=""> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
          <h4 class="modal-title" id="modalCreateNewManualResyncLabel">Create New Resync 
          </h4> 
         </div> 

         <!-- Model Body --> 
         <div class="modal-body" > 
          <div class="container-fluid"> 
           <div class="modal-content-div"> 
            <label>Company:</label> 
            <label>Sync Reason:</label> 
           </div> 
           <div class="modal-content-div-data"> 
            <button class="btn btn-default" id="buttonCompaniesList" onclick="listCompaniesToogle();" type="button" style="display: inline-block; width: 180px;">Select Company<span id="spanArrowIndicator" style="margin-left: 10px; margin-right: 10px;" class="caret"></span></button> 
            <div id="wraptest" class="wrapper-for-dropdown"> 
             <ul id="ulcompanies" class="dropdown-ul"> 

             </ul> 
            </div> 
            <input type="text" /> 
           </div> 
           <div class="modal-footer"> 
            <button type="button" class="btn btn-default" data-dismiss="modal">Close<span style="margin-left: 10px;" class="glyphicon glyphicon-remove"></span></button> 
            <button type="button" class="btn btn-default">Create<span style="margin-left: 10px;" class="glyphicon glyphicon-ok"></span></button> 
           </div> 
          </div> 
         </div> 
         <!--End Of Modal Body --> 
        </div> 
       </div> 

[Текущий пример графического интерфейса пользователя. Италия и Международный не кликабельны] [1]

[1] Италия и Международный не кликабельны:. http://i.stack.imgur.com/uVcLj.jpg

Answer 1

Добавление

.modal {overflow: visible} 

решаемые проблемы. Не добавляйте ничего в .model-body.

Кроме того, удаление некоторых других стилей на моем собственном div решило проблему. Установка высоты на авто.

Спасибо.