How to resize columns with DataTables with the search inputs into the table header?

Crez

Hi! I would like to know how can I make an auto-sizing of my table columns when I add search inputs into the table header.

By the time the column width is fixed at 169px (probably due to the search inputs) and I don't know how to resize it (so it can fit to my data).

Can you help me please?

$(document).ready(function() {
    // Setup - add a text input to each header cell
    $('#maTable thead .search').each( function () {
        var title = $('#maTable thead .header_title').eq( $(this).index() ).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'"/>' );
    } );
 
    // DataTable
    var table = $('#maTable').DataTable();
    
    // Apply the search
    table.columns().every( function () {
        var that = this;
        
        $( 'input', this.header() ).on( 'keyup change', function () {
            that
                .search( this.value )
                .draw();
        } );
    } );
});

allan

Can you link to a test case showing the issue, as per the forum rules please.

Allan

Crez

How can we upload a picture here?

Does it works? : https://cloud.githubusercontent.com/assets/12269381/7930843/3484d52a-090c-11e5-878a-c3fe616ecf09.PNG

allan

I need a link to the actual page so I can inspect the DOM and specifically look at the CSS. An image shows the issue, but does not allow me to offer any help as to how to fix the issue.

Allan

Crez

I can't do that because the site is on a private server (it's an intranet website for a company in which I do my internship). I can access to the website but external users can't...
But if you want the CSS and Php files I can post it here

allan

Can you use http://live.datatables.net or JSFiddle to reproduce a test case. Also did you try my suggestion from GitHub - use your browser's developer tools to inspect the input elements and see if they have a width set on them. Try setting the width to (eg) 90%

Crez

I tried to use it to reproduce a test case but I use php injections and SQL requests in my code so the result is not visible. Sorry

Otherwise I tried your suggestion from Github but it didn't work. As I said on Github, I think it's a default build configuration in the dataTables.js. So I certainly have to use jquerry functions to modify it. But I don't know which one and how...

When I use the browser's developer tools to inspect the element, the only width setting on my input is the next one:

element.style {
  width: 146.996997117996px;
}

Crez

By the way, I can see all of my CSS width properties crushed by this one...

allan

DataTables' CSS doesn't set the width on any input element.

I'm afraid that without a page showing the issue, there is little I can do to help.

Allan