Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 81918

Responsive issue with _resizeAuto() and CSS min-width

$
0
0

I'm trying use CSS to set a min-width for my columns, but when I do this the table's responsiveness is broken. I've tracked the problem down to the _resizeAuto() in the Responsive plugin.

The problem is the code creates a clone of the table and the headers and strips the min-width from the clone. When it does this, the minWidth property it calculates for each column ends up being different than the CSS enforced min-width actually on the table.

When _columnsVisiblity() runs, it's calculations end up all being wrong, so the columns do not resize and hide based upon the actual min-width of the column.

If I change the following lines in the _resizeAuto() function:

        var headerCells = dt.columns()
            .header()
            .filter( function (idx) {
                return dt.column(idx).visible();
            } )
            .to$()
            .clone( false )
            .css( 'display', 'table-cell' )
            .css( 'min-width', 0 );

... and remove the css( 'min-width', 0 ) to make it:

        var headerCells = dt.columns()
            .header()
            .filter( function (idx) {
                return dt.column(idx).visible();
            } )
            .to$()
            .clone( false )
            .css( 'display', 'table-cell' );

The code works as expected.

Why is it overriding the min-width property?

Is this something that can be changed?

Is there a better way to set a minimum width for a column?


Viewing all articles
Browse latest Browse all 81918

Trending Articles