FixedHeader misalignment when Responsive control column is hidden/collapsed

glemos

Link to test case:

https://jsfiddle.net/sancorUI/f85sgzwv/

Debugger code (debug.datatables.net):

-

Error messages shown:

-

Description of problem:

The fixedHeader extension miscalculates the width of all table headers when responsive is configured with a control column and that specific control column is hidden

I think the bug is in this function

_api_registerPlural("columns().widths()", "column().width()", function() {
    var columns = this.columns(":visible").count();
    var row = $("<tr>").html("<td>" + Array(columns).join("</td><td>") + "</td>");
    $(this.table().body()).append(row);
    var widths = row.children().map(function() {
        return $(this).outerWidth();
    });
    row.remove();
    return this.iterator("column", function(settings, column) {
        var visIdx = _fnColumnIndexToVisible(settings, column);
        return visIdx !== null ? widths[visIdx] : 0;
    }, 1);
});

widths has the array of width but this.iterator starts in column 1 (0 is the responsive control column but is hidden)

allan

Hi,

Ah - it too me a little while to realise that I need to have the viewport large enough to not have any columns hidden by responsive (other than the control column, which is what it does), but yes, when I do that, I agree, there is a bug there. Many thanks for pointing that out.

I'll post back when I've got a fix.

Allan

allan

Fix on master and I've backported it to v2 if there is another release for v2.

Many thanks again for flagging this up - it was a good one!

Allan