T. Ferreira T. Ferreira - 4 months ago 37
AngularJS Question

Angular-datatables Bootstrap search bar CSS

I'm using angular-datatables with the Bootstrap integration. However, the search bar looks weird. It doesn't look like the normal Bootstrap text fields with that nice glow effect.

This is the angular-datatables search bar:

enter image description here

This is the Jquery Datatables search bar:

enter image description here

And I'm not doing anything wrong because the demo on the angular-datatables site looks the same: https://l-lin.github.io/angular-datatables/#/bootstrapIntegration

Does anyone know how I can have the regular Bootstrap look in angular-datatables? Maybe some CSS code for me to change?

Answer

Angular dataTables overrides the bootstrap css, with this css class .dataTables_filter input[type="search"] so if you want to regain the bootstrap css you should remove this class from the angular-datatables.css file.

If you don't want to edit the dataTables css you can add this:

.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);
}

to your css file put it after both the angular datatables and bootstrap css.