Multi Filter Table width problem.

JanNL_FR

Description of problem: When I use Multi Filter option, the tbody width is going out of proportions. When I do not use the Multi Filter everything is OK.

    // Multi Column filter
    this.api().columns().every(function (index) {
        var column = this;

        // Create select element and listener
        var select = $('<select><option value=""></option></select>')
            .appendTo($(column.footer()).empty())
            .on('change', function () {
                var val = DataTable.util.escapeRegex($(this).val());
                column.search(val).draw();
            });

        // Add list of options
        column
            .data()
            .unique()
            .sort()
            .each(function (d, j) {
                select.append(
                    '<option value="' + d + '">' + d + '</option>'
                );
            });
    });

Is there setting I can apply?

Jan

kthorngren

Apply styling to the select inputs, something like this:

th > select {
  width: 100%;
}

Kevin

JanNL_FR

This was the solution for me.

The columns assumed the width of the contents of the dropdown boxes and now the widths remain the same as in the table body.

initComplete: function () {
            // Multi Column filter
            this.api().columns([0, 1, 2]).every(function (index) {
                var column = this;

                var select = $('<select class="filter-select" style="width:100%;"><option value=""></option></select>')
                    .appendTo($(column.footer()).empty())
                    .on('change', function () {
                        var val = DataTable.util.escapeRegex($(this).val());
                        column.search(val).draw();
                    });

                column
                    .data()
                    .unique()
                    .sort()
                    .each(function (d, j) {
                        select.append(
                            '<option class="filter-option" value="' + d + '" style="word-wrap: break-word;">' + d + '</option>'
                        );
                    });
            });
        }