Headers do not align when using default scrolling. [includes possible fix]
Headers do not align when using default scrolling. [includes possible fix]
samvdb
Posts: 8Questions: 0Answers: 0
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?
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?
This discussion has been closed.
Replies
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
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 :)
https://dl.dropboxusercontent.com/s/zs5rp4wei0g0y8l/footer_misalignment.png
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/
Have you been able to debug it? I can't find the solution.
Thanks
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