z-endeksi ve taşma hiç işe yaramıyor

Question

Z-endeksi, taşma, mutlak ve dinlenme css özelliklerini ayarlamaya çalıştım ancak açılan menü hala küçük kare olarak görünüyor. konsol günlüğü aracılığıyla, bootstrap-tabel.css ve açılanma gibi bazı stillerin kendileri ve bir stil arasında her zaman birbiriyle çakıştığını anladım. Bunu nasıl düzeltebilirim?

This my plunker

css

.dropdown-menu>li 
{ position:relative; 
    -webkit-user-select: none; /* Chrome/Safari */ 
    -moz-user-select: none; /* Firefox */ 
    -ms-user-select: none; /* IE10+ */ 
    /* Rules below not implemented in browsers yet */ 
    -o-user-select: none; 
    user-select: none; 
    cursor:pointer; 
} 
.dropdown-menu .sub-menu { 
    left: 100%; 
    position: absolute; 
    top: 0; 
    z-index: 999; 
    overflow: visible; 
    display:none; 
    margin-top: -1px; 
    border-top-left-radius:0; 
    border-bottom-left-radius:0; 
    border-left-color:#fff; 
    box-shadow:none; 

    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    -moz-overflow-scrolling: touch; 
    -ms-overflow-scrolling: touch; 
    -o-overflow-scrolling: touch; 
    overflow-scrolling: touch; 
    height: auto; 
    max-height: 500px; 
    border-left: none; 
    border-right: none; 
    -webkit-border-radius: 0 !important; 
    -moz-border-radius: 0 !important; 
    -ms-border-radius: 0 !important; 
    -o-border-radius: 0 !important; 
    border-radius: 0 !important; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    -ms-box-shadow: none; 
    -o-box-shadow: none; 

} 
.right-caret:after,.left-caret:after 
{ content:""; 
    border-bottom: 5px solid transparent; 
    border-top: 5px solid transparent; 
    display: inline-block; 
    height: 0; 
    vertical-align: middle; 
    width: 0; 
    margin-left:5px; 
} 
.right-caret:after 
{ border-left: 5px solid #ffaf46; 
} 
.left-caret:after 
{ border-right: 5px solid #ffaf46; 
} 

Answer 1

, alt menüleri göstermek style.css dosyasının en üstünde ... Yeni bir .dropdown menü sınıfına overflow:visible ekleyin.

Bu iki örnekten yalnızca birini kullanın. Her ikisi de, bootstrap-table.min.css dosyasının Plunker'da menünün koduyla neden olduğu çakışmayı geçersiz kılar.

Veya CSS seçme zinciriyle daha spesifik olmak için, kullanmak zorunda kalmamak için! Önemli geçersiz kılma:

.fixed-table-toolbar #toolbar .dropdown-menu { 
    overflow: visible; 
} 

Answer 2

Onun bootstrap bir css kuralı neden oluyor. Bunu çözmenin bir yolu aşağıdaki gibidir:

.fixed-table-toolbar .dropdown-menu{ 
    overflow:visible !important; 
} 

boostrap-table.min.css overflow:auto sahiptir (sizin linke test edilmiştir). Ya yeni bir sınıf veya id atamak ve yapmak o visible veya benzeri !important kullanmak

yukarıda

tam olarak başarmak için çalışıyoruz ne