Responsive and FixedHeader(footer) hiding columns too soon.

Splashpuppy

When using Responsive together with FixedHeader (specifically with a footer) on a table whose original data exceeds the container size (but whose cells are easily wrapped to fit), Responsive starts hiding columns before the cells have been compressed.
This appears to be due to _resizeAuto when cloning the table does not apply the same css to the footer as the header.
Specifically, it does not apply the 'width' and 'min-width' options. If these are applied, then the cells are shrunk (wrapped) and only hidden by responsive as a last resort.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Splashpuppy

I have set up an example at https://live.datatables.net/pejeyeju/1/edit
It does not directly show my issue, but the general idea.
If you disable responsive, as you resize the output, the table (cells) wrap the 'blah blah', then eventually overflows.
If you enable responsive, the table goes responsive (hides columns) before any wrapping (minimal resizing required).
In my exact situation altering the code in dataTables.responsive.js where the table is cloned so the footer cloning matches the header cloning fixed the issue.

        if (footer) {
            var clonedFooter = $(footer.cloneNode(false)).appendTo(clonedTable);
            var footerCells = dt
                .columns()
                .footer()
                .filter(function (idx) {
                    return dt.column(idx).visible();
                })
                .to$()
                .clone(false)
                .css('display', 'table-cell')
**              .css('width', 'auto')
                .css('min-width', 0);
**          $('<tr/>').append(footerCells).appendTo(clonedFooter);
        }

allan

Oof yes. It is going badly wrong in that example. Thanks for putting that together - and providing the fix!

Fix is committed here and will be in the nightly shortly.

Allan

allan

Much better with that change. Thank you again!

Allan