Search code examples
cssangularjstwitter-bootstrapangular-datatables

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?

Solution

  • 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.