Trình đơn thả xuống được chọn trong chế độ Bootstrap được ẩn đằng sau chân phương thức

Question

Tôi đang sử dụng phương thức dựa trên ví dụ từ trình khởi động twitter. Tôi có một phần tử chọn sử dụng được chọn. Khi chọn lựa chọn thả xuống, nó được cắt bởi footer phương thức. Tôi đã cố gắng để thêm giá trị z-index trên các yếu tố được chọn, nhưng không có gì hoạt động. Tôi đang nhìn vào nó trong nghiêng, và tự hỏi nếu nó chỉ là vì các yếu tố chọn là với divs được trước div footer phương thức? Tôi đang sử dụng CSS mặc định từ được chọn và bootstrap cho điều này là tốt, vì vậy tôi đã không sửa đổi bất cứ điều gì.

ví dụ.

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> 

Answer 1

Đối với z-index để làm việc, bạn cũng phải thiết lập vị trí = tương đối, tuyệt đối, hoặc cố định. Đồng thời, việc đặt chỉ mục z-index như 5000 có thể hữu ích. (Các phương thức là chỉ số az trong những năm 2000

như vậy trong css của bạn tôi sẽ thêm này:.

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

Edit: .modal-body lớp có một tài sản overflow-y: auto Bạn có thể cần phải thay đổi điều này để. :.

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

Answer 2

tôi cũng đã có vấn đề này giống nhau và không thể có được @ của hajpoj để làm việc tôi đã làm cho nó làm việc bằng cách thiết lập css sau:

.modal-body { 
    position: static; 
}