THead and TBody mismatch with ScrollX

leviar

Good evening everyone.
The problem with the mismatch of the thead and tbody when using scrollX.
when you first open the table, all cells are shifted, but if you use a filter or a sort field, everything becomes normal.
Here is a test case, with confirmation:
https://live.datatables.net/yafapeg/115/edit

Thanks!

allan

It is because you are causing the columns in the header to change size, after the table has been has been drawn by inserting the input elements.

The most obvious answer is to cause the table to redraw again after inserting the input elements, but possibly an easier way it to add:

thead input {
  width: 100%;
}

to your CSS, so the input elements in the header don't force the column widths. Updated example.

Allan

leviar

Thank you very much, it's gotten better, but sometimes, after an update page (maybe on 4 or 6, F5 pressing), the layout gets messed up.
It feels like something isn't loading in time.
So I still want to redraw the table. Can you tell me how to do it correctly?

Thank you!

kthorngren

Use draw() in initComplete, like this:
https://live.datatables.net/yafapeg/124/edit

Maybe also try columns.adjust() in initComplete.

Kevin

leviar

Thank you wery much!
It ~~lives~~ work!

leviar

Ha! The whole problem was because I didn't follow the installation instructions I moved the code for the datatable to a separate file and imported it into the head. As soon as I moved the import to the end of the body, all the problems disappeared