Responsive issue with _resizeAuto() and CSS min-width

DanSwitzer2

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?

allan

This was the commit that added that. It was to allow compatibility with FixedHeader which uses the min-width property.

I'm not sure what the best way to resolve that will be...

Allan

DanSwitzer2

@allan

Could perhaps the min-width only be removed if the FixedHeader is activated?

Or what if the _resizeAuto() triggered a responsive-autoresize.dt event which passed in a reference to the headerCells variable then the FixedHeader plugin could apply the fixes it needs.

Likewise, with an event like that I could undo the min-width setting.

allan

I'm not sure about the FixedHeader only option as that might introduce edge cases for when only FixedHeader is enabled. I've tried to keep the extensions free from knowledge of the other extensions. However, it would work...

Likewise with the autoresize event - good suggestion, I just feel that it shouldn't be required. Its an extra step that you shouldn't need to do and I thinking there must be a better solution. I've just not put my finger on it yet.

Allan

DanSwitzer2

@allan:

I was thinking if you exposed a responsive-autoresize.dt event, then the FixedHeader could use it to trigger removing the min-width since the code appears to be explicitly to support that extension. Then my code wouldn't have to do anything.

jlh

I had a similar problem and I found this CSS hack to achieve a minimum width on my table columns:

.my-table th::before {
    content: '';
    display: block;
    min-width: 100px;
}

This injects a zero-height block element into every header cell with a minimum width of 100px. When the plugin creates its shadow copy of the table, this style will be applied to it as well.