自举模式溢出问题

我有一个带有按钮的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

自举模式溢出问题

回答

相关问题