Headers do not align when using default scrolling. [includes possible fix]

samvdb

Hi,

Edit: See possible solution below.

Im having a strange problem with the alignment of headers that i cannot reproduce on jsbin. See link below, all works fine.

My default record length is 10 records. I styled the datatable with default bootstrap 3 styling (github plugin repo). I added a few extra stuff of my own but i dont think that's important.

Look at the following screenshot: https://dl.dropboxusercontent.com/s/fv1zqbahfux4x36/Bad_datatable_003.png
I marked it with red circles in the header to show the problem. Since i have only 10 records the dataTable collapses and no scrollbar is shown. (that part is good). When i use the pagination to go to the next page the alignment is correct! Very strange...

Look at the next screenshot: https://dl.dropboxusercontent.com/s/uk9i8ukiqvizpkj/Good_datatable_004.png
When i change the record length to 25 records, the alignment is correct.

I have really hit a dead end here and i'm asking for help. I'm guessing it's some kind of CSS issue which screws with the column calculation but i can't figure it out. Any help is welcome!

Testdata:

http://live.datatables.net/arodaw/4
http://debug.datatables.net/axekuy

Edit:
I also read the following thread: http://datatables.net/forums/discussion/16140/columns-wrong-alignment-table-header-and-data-improper-alignment
This is what i'm getting. However setting border-collapse: seperate; on the table did not work

Edit2:
I maybe found a workaround... Since im using ajax to get my data:

[code]
"fnInitComplete": function() {
oTable.fnAdjustColumnSizing();
},
[/code]

However i'm not sure what the performance impact of this is. Is this a correct solution Allan?

allan

Your fnInitComplete is the correct way to go. DataTables 1.10 does that by default.

Also ensure that you are not setting sScrollXInner (edit: from the debug you aren't so its not that - fnAdjustColumnSizing is the right thing to do regardless :-) ).

Allan

samvdb

Hi Allan,

Thanks for you response, i was using 1.10 btw :) I still had to do it manually.
And i'm not using sScrollXinner. The auto calculation works just fine :)

samvdb

Found another issue, this time the footer is not aligned correctly. Still using the same setup as above.

https://dl.dropboxusercontent.com/s/zs5rp4wei0g0y8l/footer_misalignment.png

allan

Can you please link to a test case so I can debug it.

samvdb

Hi Allan,
I'm not able to put it on jsbin but i hosted the table on one of our servers.

http://datatables.dev64.cognosis.be/_datatable/

samvdb

Hi Allan,
Have you been able to debug it? I can't find the solution.

Thanks

allan

Sorry no - I've not had a chance yet. Could you try it without the filtering inputs at the bottom of the table and see if that helps?

Allan

samvdb

Hi Allan,

If you look at the table now you can see i removed the filters in the first example.
Header alignment is still off and the bottom filters have a small offset as well.

allan

I'll try to take a look properly tomorrow morning - thanks!

Allan