FixedHeader width mismatch when Responsive plugin hides columns
FixedHeader width mismatch when Responsive plugin hides columns
croebot
Posts: 2Questions: 0Answers: 0
Found a bug and patched it, wasn't sure where to provide it. I apologize if this isn't the right place.
DataTables version: FixedHeader 4.0.6
Plugins: FixedHeader + Responsive
Scenario
When both FixedHeader and Responsive are active and Responsive hides one or more columns (e.g. a dtr-control expander column that is hidden on desktop), the floating header produced by FixedHeader displays incorrect column widths.
Root cause
In dataTables.fixedHeader.js, the function that sets column widths on the floating header's <colgroup> does this (around line 1112):
var widths = this.s.dt.columns(':visible').widths();
for (var i = 0; i < widths.length; i++) {
cols.eq(i).css('width', widths[i]);
}
cols is built from the cloned <colgroup> and contains a <col> element for every column — including hidden ones. But columns(':visible').widths() only returns widths for visible columns.
Every visible column ends up one slot off, and the last visible column gets no width assigned at all.
Fix
Use columns(':visible').indexes() to get the actual column positions, and use those to target the correct <col> elements:
var visCols = this.s.dt.columns(':visible');
var widths = visCols.widths();
var indexes = visCols.indexes();
for (var i = 0; i < widths.length; i++) {
cols.eq(indexes[i]).css('width', widths[i]);
}
This ensures that widths[i] is always written to the <col> at the column's true index, regardless of how many hidden columns precede it.
Replies
Hi,
Brilliant bug report - thank you! I was looking through my examples locally and getting confused as to why I wasn't seeing this. Then I remembered this commit.
If you use DataTables 2.3.7 (the current release at the time of writing), this issue is resolved since
:visibledoes correctly not include the columns hidden by Responsive.I think as a result, there probably isn't a need to implement the change in FixedHeader.
Regards,
Allan
It's still broken in 2.3.7. It may be something I'm doing wrong.
I've created two examples on the site I discovered this bug on. One using the cdn files (broken) and one that just uses my simple fixed dataTables.fixedHeader.js file. everything else is exactly the same.
The widths are correct if the dtr column is visible, but when full screen the first column shrinks a lot on the fixedHeader.
https://srsstats.roemedia.com/_dt_issue/broken.html ( all cdn files )
https://srsstats.roemedia.com/_dt_issue/working.html ( using my patch )