Z-Index und Überlauf funktioniert überhaupt nicht

Question

Ich wurde versucht, Z-Index, Überlauf, absolute Position und Ruhe CSS-Funktionen zu setzen, aber Dropdown-Menü erscheint immer noch in kleinen Quadrat. Durch Konsolenprotokoll finde ich heraus, dass einige Stile wie bootstrap-tabel.css und dropdown zwischen sich selbst und einem Stil jedes Mal außer Kraft gesetzt werden. Andere Wie kann ich es beheben?

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

die Untermenüs anzuzeigen, fügen overflow:visible zu einem neuen .dropdown Menü Klasse ... an der Spitze der style.css-Datei.

Verwenden Sie nur eines dieser beiden Beispiele. Sie überschreiben den Konflikt, den die bootstrap-table.min.css-Datei in Plunker verursacht, mit dem Code des Menüs.

Oder genauer gesagt mit der CSS-Selektorkette, um die Verwendung der! Wichtiger Override:

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

Answer 2

Es wird durch die CSS-Regel im Bootstrap verursacht. Eine Möglichkeit, dies zu lösen, ist unter: (Getestet auf Ihrem Link)

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

Bootstrap-table.min.css hat overflow:auto. Ordnen Sie entweder eine neue Klasse oder id und machen es visible oder benutzen !important wie oben