Angular-datatables Bootstrap-Suchleiste CSS

Question

Ich verwende angular-datatables mit der Bootstrap-Integration. Die Suchleiste sieht jedoch seltsam aus. Es sieht nicht wie die normalen Bootstrap-Textfelder mit diesem schönen Glow-Effekt aus.

Dies ist die Winkel-Datentabellen-Suchleiste:

Dies ist die JQuery Datentabellen-Suchleiste:

Und ich mache nichts falsch gemacht, weil die Demo auf der Website angular-dataables sieht gleich aus: https://l-lin.github.io/angular-datatables/#/bootstrapIntegration

Weiß jemand, wie ich das reguläre Bootstrap in eckigen Datatables aussehen lassen kann? Vielleicht etwas CSS-Code für mich ändern?

Answer 1

Angular dataTables überschreibt die Bootstrap-CSS mit dieser CSS-Klasse .dataTables_filter input[type="search"], wenn Sie also die Bootstrap-CSS wiederherstellen möchten, sollten Sie diese Klasse aus der angular-datatables.css-Datei entfernen.

Wenn Sie nicht wollen, die Datentabellen zu CSS bearbeiten Sie diese hinzufügen:

.dataTables_filter input[type="search"]:focus { 
    border-color: #66afe9; 
    outline: 0; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); 
} 

zu Ihrer CSS-Datei, nachdem es sowohl den Winkeldatentabellen und Bootstrap CSS setzen.