How to change the width of the individual column search bars

How to change the width of the individual column search bars

RaveEmoiRaveEmoi Posts: 2Questions: 0Answers: 0

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?

Replies

  • kthorngrenkthorngren Posts: 17,754Questions: 25Answers: 4,215
    edited January 25

    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 :smile: 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

  • RaveEmoiRaveEmoi Posts: 2Questions: 0Answers: 0

    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!

Sign In or Register to comment.