Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
frabcus opened this issue Mar 7, 2017 · 5 comments
Open

Comments

@frabcus
Copy link

frabcus commented Mar 7, 2017

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
Copy link
Collaborator

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
Copy link
Author

frabcus commented Mar 8, 2017

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
Copy link
Collaborator

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

frabcus added a commit to ebmdatalab/euctr-tracker-code that referenced this issue Jun 14, 2017
Needs this bug fix to stop scroll jumping.
DataTables/FixedHeader#94
@iant-ee
Copy link

iant-ee commented Oct 9, 2018

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
Copy link

C-Duv commented Dec 14, 2020

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:

  • DataTables: v1.10.7
  • fixedHeader plugin: v3.1.7

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants