Bootstrap modal içindeki seçili açılır liste, modal altbilginin arkasında gizlenir

Question

Twitter bootstrap örneğinden yola çıkarak bir model kullanıyorum. Seçilmiş olan seçilmiş bir elemanım var. Seçilen seçim düştüğünde, modal altbilgi tarafından kesilir. Seçilen elemanlara z-endeks değerini eklemeyi denedim ama hiçbir şey işe yaramıyor. Eğilmeye bakıyorum ve sadece seçim elemanının modal altbilgi div'undan önceki div'lerle mi olduğunu merak ediyorum. Bunun için seçilmiş CSS'yi ve bunun için de bootstrap kullanıyorum, bu yüzden hiçbir şeyi değiştirmedim.

örnek.

HTML: z endeksi çalışmak

  <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çin, ayrıca göreli, kesin veya sabit pozisyon = belirlemek zorunda. Ayrıca, z-endeksi 5000 gibi bir şey koymak yardımcı olabilir. (Modal 2000'li yıllarda az endeksine i eklersiniz css'nizde kadar

.

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

Düzenleme: .modal-body sınıf Sen bu değiştirmeniz gerekebilir bir overflow-y: auto özelliğine sahiptir. :.

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

Answer 2

Ben de bu aynı sorunu vardı ve işe hajpoj yıllardan @ alamadım ben aşağıdaki css ayarlayarak çalışma aldın:

.modal-body { 
    position: static; 
}