自舉模式溢出問題

我有一個帶有按鈕的Bootstrap模式。當我點擊按鈕時，它顯示在按鈕下方的右側。包含一個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>

[GUI的當前實例。意大利和國際無法點擊] [1]

[1]意大利和國際是不可點擊：http://i.stack.imgur.com/uVcLj.jpg

來源

2015-04-16 user3514987

你可能需要在祖先元素上放置'overflow：hidden'來強制它包含列表。沒有演示很難說。 http://liveweave.com – isherwood

[Bootstrap drop down cutting off]可能的重複（http://stackoverflow.com/questions/14473769/bootstrap-drop-down-cutting-off） – isherwood

[Bootstrap：In a模式對話框，我如何使下拉菜單展開對話框？]（http://stackoverflow.com/questions/11899870/bootstrap-in-a-modal-dialog-how-do-i-make-the-dropdown -menu-expand-outside-the） – Aguardientico

添加

.modal {overflow: visible}

解決的問題。不要向.model-body添加任何其他內容。

另外刪除我自己的一些其他風格的div解決了這個問題。將高度設置爲自動。

謝謝。

來源

2015-04-16 21:17:30 user3514987

自舉模式溢出問題

回答

相關問題