Column width does not work with search filter

Column width does not work with search filter

NoBullManNoBullMan Posts: 61Questions: 17Answers: 2

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
When I set column widths in columnDefs, it works fine, once I set autoWidth to false.
When I add column filter row, it applies width definitions to column filter row only and for the header itself, it ignores them and just divides table width by number of columns and set each column's width to that value. Any way to get around this issue?

    $(document).ready(function () {
        ...
        // Table Column Filtering Setup
        $('#myTable thead tr')
            .clone(true)
            .addClass('filters')
            .appendTo('#myTable thead');

        bindTable();

    function bindTable() {
        myTable = $("#myTable").DataTable({
            ...
            columnDefs: [
                {
                    targets: [0],
                    width: "13%"
                },
                {
                    targets: [1],
                    width: "10%"
                },
                ...
            ]

When I check generated code:

<tr role="row">
    <th style="width: 126px;" class="sorting" tabindex="0" aria-controls="myTable" rowspan="1" colspan="1" aria-label="EDL: activate to sort column ascending">EDL</th>
    <th style="width: 126px;" class="blah sorting" tabindex="0" aria-controls="myTable" rowspan="1" colspan="1" aria-label="Item ID: activate to sort column ascending">Item ID</th>
</tr>

<tr class="filters" role="row">
    <th style="width: 13%" rowspan="1" colspan="1"><input type="text" placeholder="EDL"></th>
    <th style="width: 10%" rowspan="1" colspan="1"><input type="text" placeholder="Item ID"></th>
</tr>

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794
    Answer ✓

    You can use CSS for the inputs. See if this thread helps.

    Kevin

  • NoBullManNoBullMan Posts: 61Questions: 17Answers: 2
    edited March 18

    Thank you Kevin.
    using

    thead input {
        width: 100%;
    }
    

    fixed the issue.

Sign In or Register to comment.