DataTables / FixedHeader

Fix the header, footer, left or right columns of a table in place, to always show them when scrolling
http://www.datatables.net/
Other
75 stars 83 forks source link

Columns jump after scrolling back up with fixedHeader and no autoWidth #94

Open frabcus opened 7 years ago

frabcus commented 7 years ago

Steps to reproduce:

  1. Load this fiddle. https://jsfiddle.net/frabcus/eyk79woh/13/
  2. Make the window narrow vertically.
  3. Scroll down the page - the header stays fixed (floating)
  4. Scroll back up.
  5. At the top, when the header merges back in, all the column widths jump to new values.

I've narrowed it down to this code in _unsize: https://github.com/DataTables/FixedHeader/blob/master/js/dataTables.fixedHeader.js#L348

The cells are the only place the width of columns is stored in the DOM. And _unsize wipes those width values, resetting the table to not have fixed widths. If I make _unsize just do nothing and return, everything works fine.

The fix for bug #57 introduced this code. I don't know the solution as I don't fully understand the other cases. I'm not sure why for any header case the widths should be wiped.

DataTables-1.10.13 FixedHeader-3.1.2 jquery-3.1.1

DataTables commented 7 years ago

Thanks for the JSfiddle link

How narrow should the window be? I've just tried it with ~200px width and wasn't able to reproduce the problem (Chrome / Linux).

frabcus commented 7 years ago

Sorry, I confusingly said "narrow vertically".

What I meant was "short", so the height of the window is less than the table. This is so that the fixedHeader behaviour is triggered.

Thanks!

DataTables commented 7 years ago

Oops - sorry. I can see it now! Yup - that most certainly looks like a bug.

iant-ee commented 5 years ago

We're running into the same problem here. We are manually adding widths to our tables when they are initialised, but these are being removed by FixedHeader. We've only just upgraded from DataTables 1.10.9 which was working fine for us.

If I remove the || (item === 'header' && ! this.s.autoWidth) from it also works fine for us.

So it looks like the problem for #57 is if the columns don't have set widths then the widths will be wrong in the fixed header. So a fix was added to copy the width from the main table to the header, and then remove it again when the fixed header was hidden. This behaviour was disabled when autoWidth is used, because autoWidth gave the columns widths, so there was no need to add a width to the fixed header, or remove it again when the fixed header was hidden.

I think the fix needs to be to check if the columns already have widths from other sources before adding/removing widths. This may require adding some meta data to the header element instead of fixing its width.

C-Duv commented 3 years ago

I have the same issue (defined columns widths are lost when the fixed/floating header is detroyed), here is an updated JSFiddle (without paging nor ordering): https://jsfiddle.net/dh3bcpoj/1/

(Or, on the "live.datatables.net" platform: http://live.datatables.net/dafabila/1/edit?html,js,output)

Versions: