FixedColumns and scrollx headers not align with last version

FixedColumns and scrollx headers not align with last version

Ices_EyesIces_Eyes Posts: 3Questions: 1Answers: 0
edited June 2020 in Free community support

Hi all,
I was working on v1.18.18 DT and 4.4.1 bottstrap on a project where there is a table with fixed first column and scrollable rows. I have updated the project to last dt version and bootstrap 4.5.0, and now the header columns result to be not aligned with the data rows.
Here an example with my data:
https://codepen.io/Ices_Eyes/pen/vYLmBod

On real page the alignment is also weaker than on the test page... Any idea on what should be the problem? Thanks :)

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,147Questions: 26Answers: 4,736

    The problem is likely due to the documented incompatibility between FixedHeader and the scrolling features. From the FixedHeader docs:

    Please note that FixedHeader is not currently compatible with tables that have the scrolling features of DataTables enabled (scrollX / scrollY). Please refer to the compatibility table for full compatibility details.

    Kevin

  • Ices_EyesIces_Eyes Posts: 3Questions: 1Answers: 0
    edited June 2020

    Ok, in real I'm not using fixed header, but fixed column, and it does not seem to be incompatible with scrolling...
    I've just made a wrong title, damn me... But unable to change it now, sorry :(

  • kthorngrenkthorngren Posts: 20,147Questions: 26Answers: 4,736

    I see, missed that you were using FixedColumns instead. Messed with it a bit and it seems there is a CSS change/issue between 1.10.20 and 1.10.21 with Bootstrap 4. @allan or @colin will need to help find the specific issue.

    Note that you are loading both BS 4.5.0 and BS 4.1.1 styling. The 4.1.1 is compiled into your concatenated Datatables files. Although this doesn't seem to be the issue it may result in other styling conflicts.

    Kevin

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin
    Answer ✓

    I've edited the post title to clarify that this is about FixedColumns.

    If you remove the table-sm class it appears to work as expected. Looks like an error in our integration there I'm afraid. I'll file a bug for that.

    Allan

  • Ices_EyesIces_Eyes Posts: 3Questions: 1Answers: 0
    edited June 2020

    Thanks a lot...will looking forward for a fix :) Removing the table-sm works also on my real page!

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin

    I've been looking into this more, and on your example page, you can see the error even without FixedColumns. I've cloned it to here and that uses the nightly versions of our software and the alignment appears to work okay there with Bootstrap 4.5.2.

    Allan

  • robertbyrobertby Posts: 4Questions: 0Answers: 0

    Hello,
    it seems, that this is still a problem. In the example from allan it works with the nightly builds, but not if i use the current stable version of dt (1.10.25).
    Is there a plan, when this fix will be included in a stable version?

    Regards

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    This is the same example here with 1.10.25 and it appears to be working as expected. Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

    Cheers,

    Colin

  • robertbyrobertby Posts: 4Questions: 0Answers: 0

    Sorry, that was my fault: the datatables.css was not correctly included in my project. Now it all works! Thank you anyway.

Sign In or Register to comment.