How to change the width of the individual column search bars

RaveEmoi

I'm having issues with the width of the individual column search bar widths in my datatable. If I disable the individual column search feature, I can manipulate the width of the columns in my dataTable without any issue. The individual column search bars' width are not tied to the width of the actual column. So If I disable the feature, I can manipulate the width of my dataTable easily, and all the forum information on how to change the width of my dataTable works. When I enable the individual column search feature, the columns are set back to the width of the search bars.

I found the CSS selector for the original search bar(div.dataTables_filter input[type="search"]{background-color: red;}), and I am able to manipulate width, color, etc. Is there a CSS selector for the individual columns search bars, or are those defined in the dataTable js library?

kthorngren

Is there a CSS selector for the individual columns search bars, or are those defined in the dataTable js library?

Those are defined by you Datatables knows nothing about these inputs as you provided custom code to create them. You probably need to add something like this:

tfoot input {
        width: 100%;
    }

Adjust the selectors as required by your table.

Kevin

RaveEmoi

thank you for the feedback

I was able to grab it by this CSS selector. Also, I am using the search columns in the th instead of the footer of the table.

th.sorting input { background-color: red; } this worked!

NoBullMan

Thank you Kevin. That fixed the issue; I just had to use thead instead of tfoot.