[SOLVED] FixedHeader column widths don't match cloned header from table

raddevon

I'm using DataTables on my site with FixedHeaders. I can hide the fixed headers, and the original column headers are the proper width, but the fixed headers seem to be a uniform width. I have tried this code at the end of my JavaScript to try to force the FixedHeaders to update, but it doesn't seem to help.
[code]
var ticketHeader = $.fn.dataTableExt.FixedHeader( ticketTable );
this.fnAdjustColumnSizing(true);
ticketHeader.fnUpdate();
[/code]

Here are the real headers after hiding the fixed headers:
http://i.imgur.com/3TvET.png
Here are the fixed headers:
http://i.imgur.com/89EQZ.png

I've setup a DynDns in case a live example is needed.
http://raddevon.dyndns.tv:8000/ticket/

Thank you in advance!

raddevon

I'm going to have to take my server down for the night. I will try to bring it back up later.

raddevon

Tried the nightly hoping this problem had been fixed, but that isn't the case. I've brought my server back up in the event someone can take a look at it.

I've also tried another fixedheader solution (http://jsfiddle.net/jmosbech/stFcx/) which works beautifully in terms of column widths but breaks the sorting.

If I could get DataTables FixedHeaders to clone the original columns properly, it would be perfect. If I could get the other script to support DataTables sorting, that would be perfect. Either way, I want to both have and eat the cake!

Thanks for your time.

raddevon

Server coming back down. I can put it back up if anyone needs to see it. I'm running Bootstrap 2 with very few modifications. I imagine any site using that would have the same problem. Looking through the forums, it seems several people are having the issue. I'm not sure if those are all using Bootstrap or if it's a more general problem.

raddevon

Should I post this in a different forum?

raddevon

Following up on this for anyone else having the same issue. I had waited a good while for a response and decided to revisit the problem today. I found the solution. More accurately, I found a workaround.

FixedHeaders is apparently broken for automatic column widths. These must be disabled for your table or else the cloned headers will not properly copy the widths of the columns. Include this in your table definition:
[code]...
"bAutoWidth": false,
...
[/code]
You may also want to then define column widths unless each column needs to be a uniform width. Example:
[code]
"aoColumns" : [
{ sWidth: '50px' },
{ sWidth: '100px' },
{ sWidth: '120px' },
{ sWidth: '30px' }
]
[/code]

I found the solution on StackOverflow.
http://stackoverflow.com/a/640910/800492

Jido

thank you for your solution, it helped me greatly.

At first it didnt solve the problem for me but when i updated to the latest version of datatables (1.9.3.dev had 1.9.1 of May) it finally aligned correctly.

before the fix and solution the cloned header would have 1 pixel more per field.