在Bootstrap模式中选择下拉菜单隐藏在模态页脚后面

我正在使用基于twitter引导示例的模态。我有一个使用选择的选择元素。当选定的选择下降时，它被模态页脚切断。我试图在所选元素上添加z-index值，但没有任何效果。我正在倾斜看它，并且怀疑它是否仅仅是因为select元素是在模态页脚div之前的div？我使用了默认的CSS和bootstrap，因此我没有修改任何东西。在Bootstrap模式中选择下拉菜单隐藏在模态页脚后面

示例。 enter image description here

HTML：

  <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 
        ×</button> 
       <h3> 
        Add Tag</h3> 
      </div> 
      <div class="modal-body"> 
       <div class="control-group"> 
        <label for="addedTags"> 
         Add tags (separated by commas) 
        </label> 
        <input id="addedTags" style="width: inherit" type="text"> 
       </div> 
       <div class="control-group"> 
        <label for="deleteTags"> 
         Delete tags 
        </label> 
        <select style="display: none;" class="tags chzn-done" id="deleteTags" multiple="multiple" name="deleteTags"><option value="49">Accessories</option> 
    <option value="69">AG_Adriano_Goldschmied</option> 
    <option value="37">BCBG</option> 
    <option value="38">Bebe</option> 
    <option value="45">Bernie_Dexter</option> 
    <option value="19">Black</option> 
    <option value="6">Blue</option> 
    <option value="66">Body-Con</option> 
    <option value="71">Casual</option> 
    <option value="39">Christian_Louboutin</option> 
    <option value="64">Clear</option> 
    <option value="50">Coach</option> 
    </select><div style="width: [object Object]px;" class="chzn-container chzn-container-multi chzn-container-active" id="deleteTags_chzn"> 
<ul class="chzn-choices"><li class="search-field"><input value="Select Some Options" class="default" autocomplete="off" style="width: 149px;" type="text"></li></ul> 
<div class="chzn-drop" style="left: 0px; top: 29px;"><ul class="chzn-results"><li id="deleteTags_chzn_o_0" class="active-result highlighted" style="">Accessories</li><li id="deleteTags_chzn_o_1" class="active-result" style="">AG_Adriano_Goldschmied</li><li id="deleteTags_chzn_o_2" class="active-result" style="">BCBG</li><li id="deleteTags_chzn_o_3" class="active-result" style="">Bebe</li><li id="deleteTags_chzn_o_4" class="active-result" style="">Bernie_Dexter</li><li id="deleteTags_chzn_o_5" class="active-result" style="">Black</li><li id="deleteTags_chzn_o_6" class="active-result" style="">Blue</li><li id="deleteTags_chzn_o_7" class="active-result" style="">Body-Con</li><li id="deleteTags_chzn_o_8" class="active-result" style="">Casual</li><li id="deleteTags_chzn_o_9" class="active-result" style="">Christian_Louboutin</li><li id="deleteTags_chzn_o_10" class="active-result" style="">Clear</li><li id="deleteTags_chzn_o_11" class="active-result" style="">Coach</li></ul></div></div> 
       </div> 
      </div> 
      <div class="modal-footer"> 
       <button class="btn" data-dismiss="modal" aria-hidden="true"> 
        Close</button> 
       <input class="btn btn-primary" id="btnAddTags" value="Save" type="button"> 
       <span class="loader"></span> 
      </div> 
      <div class="alert alert-error hide"> 
       <button type="button" class="close" data-dismiss="alert"> 
        ×</button> 
       <strong>Error</strong> <span class="alert-msg"></span> 
      </div> 
      <div class="alert alert-success hide"> 
       <button type="button" class="close" data-dismiss="alert"> 
        ×</button> 
       <strong>Success</strong> <span class="alert-msg"></span> 
      </div>

来源

2012-12-07 user576838

Z-Index的工作，你也必须设置位置=相对的，绝对的，还是固定的。另外把z-index类似5000可能会有所帮助。（该模式是在2000年的AZ指数

所以在你的CSS我想补充一点：

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

编辑： .modal-body类有一个overflow-y: auto属性您可能需要这种改变。：

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

来源

2012-12-07 18:17:20 hajpoj

chozen元素确实在css中设置了一个位置值，我把z-index设置为9999，但仍然没有jive。这个让我疯狂！ – user576838

你尝试过溢出修复吗？ – hajpoj

这样做！真棒抓人。其中一些CSS元素真的让我陷入循环。再次感谢！ – user576838

我也有同样的问题，不能得到@ hajpoj的工作，我没有得到它通过设置以下CSS工作：

.modal-body { 
    position: static; 
}

来源

2013-08-15 12:20:34 marty

在Bootstrap模式中选择下拉菜单隐藏在模态页脚后面

回答

相关问题