Aligment problem with scrollX and serverSide
Aligment problem with scrollX and serverSide
Alvii
Posts: 15Questions: 4Answers: 2
For some reason, when I use scrollX and serverSide together, the header of the table doesn't align with de body.
I´ve created a live version so you can see it:
live.datatables.net/zonogija/1/edit
I´ve discovered that, when i rezise the window, it aligns as intended, but this isn't the case when the page is loaded the first time.
In my proyect, it doesn't align even when I resize the window, but knowing why it is misaligned, and how to resolve it, i could implement the same solution in my proyect, and, with luck, it would work well there too.
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
The first problem is you are loading conflicting CSS. You are using BS4 and loading appropriately
dataTables.bootstrap4.cssbut you are also loadingjquery.dataTables.csswhich is used for standard Datatables styling. You will see two sets of sorting icons. More informatin can be found in the BS4 Styling docs.Thats not causing the alignment issue. You are getting this error in the console:
This is stopping the script before Datatables can calculate the column widths. Commenting out
"serverSide": trueeliminates the error and allows Datatables to complete the initialization.http://live.datatables.net/zonogija/2/edit
Server side processing expects an
ajaxconfig. Works as expected by removing the DOM based table and using ajax here:http://live.datatables.net/folaqobu/1/edit
Is there a reason for enabling server side processing without using Ajax?
Kevin
Thanks for your fast response Kevin!
I was trying to make the live version as close as my proyect as possible, that's why I put the serverSide, because I'm fetching the data throught ajax.
After a lot of hours of try and error, comparing your lives with my proyect, and trying to get them as similar as I could, I found out what was the issue.
For some reason, if you take out the first line of the document (<!DOCTYPE html>),
the columns misalign.
After adding this line, my table aligned itself and now it's working perfectly.
Thank you for your help!