FixedColumns and scrollx headers not align with last version

Ices_Eyes

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

kthorngren

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_Eyes

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

kthorngren

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

allan

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_Eyes

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

allan

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

robertby

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

colin

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

robertby

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