Datatable and Bootstrap styling

paguemaou

In this exemple : https://datatables.net/manual/styling/bootstrap-simple.html ,

the "search" input field has a CSS problem.

This example uses :
http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css
http://cdn.datatables.net/plug-ins/f2c75b7247b/integration/bootstrap/3/dataTables.bootstrap.css

I'm a newbee, can you help me ?

mikedmason

remove width:100%; from line 1817 in bootstrap.min.css and see if that fixes your issue.

.form-control{
    display:block;
    width:100%;
    height:34px;
    padding:6px 12px;
    font-size:14px;
    line-height:1.428571429;
    color:#555;
    vertical-align:middle;
    background-color:#fff;
    background-image:none;
    border:1px solid #ccc;
    border-radius:4px;
    -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s
}

allan

It does - although you probably don't want to modify the Bootstrap core file.

Could you try adding:

div.dataTables_filter input.form-control {
  width: auto;
}

to your CSS - that should fix it. I'll get a patch into the integration file shortly.

Allan

allan

Actually - could you try using the very latest CSS file from here: https://github.com/DataTables/Plugins/blob/master/integration/bootstrap/3/dataTables.bootstrap.css ? That should address the issue.

Thanks,
Allan

paguemaou

Hi,

Thanks for your responses.

To mikedmason : removing the width : 100% doesn't solve the problem ( maybe I need a cache refresh for the CSS?), and I doesn't want to modify the core CSS.

To allan : the first solution works like a charm :

div.dataTables_filter input.form-control {
  width: auto;
}

I tried the very last CSS from https://github.com/DataTables/Plugins/blob/master/integration/bootstrap/3/dataTables.bootstrap.css but it doesn't works (still the same CSS problem). The last commit is Feb. 17. Maybe in the next commit ?

Many thanks for you help. Problem solved.

allan

Odd - I though that would work with the latest CSS file as it does for me. I'll try again later.

Allan