Angular-datatables Bootstrap search bar CSS

Question

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:

This is the Jquery Datatables search bar:

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?

Shlomi Haver · Accepted Answer · 2016-07-18T17:07:02.970

2

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.

edited Jul 18 '16 at 17:07

answered Jul 18 '16 at 16:57

Shlomi Haver

954
9
14

Thank you! I just tried that and it works! However, I really don't want to be changing the default .css files and instead do my own changes in a separate .css file. Do you have a way to do that? – Telmo F. Jul 18 '16 at 17:02
@T.Ferreira Updated my answer, – Shlomi Haver Jul 18 '16 at 17:08
That did it! Thank you so much! :) – Telmo F. Jul 18 '16 at 17:09

Angular-datatables Bootstrap search bar CSS

1 Answers1