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

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

samvdbsamvdb Posts: 8Questions: 0Answers: 0
edited August 2013 in DataTables 1.9
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?

Replies

  • allanallan Posts: 63,381Questions: 1Answers: 10,449 Site admin
    edited August 2013
    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
  • samvdbsamvdb Posts: 8Questions: 0Answers: 0
    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 :)
  • samvdbsamvdb Posts: 8Questions: 0Answers: 0
    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
  • allanallan Posts: 63,381Questions: 1Answers: 10,449 Site admin
    Can you please link to a test case so I can debug it.
  • samvdbsamvdb Posts: 8Questions: 0Answers: 0
    edited August 2013
    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/
  • samvdbsamvdb Posts: 8Questions: 0Answers: 0
    Hi Allan,
    Have you been able to debug it? I can't find the solution.

    Thanks
  • allanallan Posts: 63,381Questions: 1Answers: 10,449 Site admin
    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
  • samvdbsamvdb Posts: 8Questions: 0Answers: 0
    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.
  • allanallan Posts: 63,381Questions: 1Answers: 10,449 Site admin
    I'll try to take a look properly tomorrow morning - thanks!

    Allan
This discussion has been closed.