table header widths do not always correspond to column widths without bJQueryUI

bwlang

the problem is worst when some column headers are very short.
Sometimes sorting on a column causes the widths to "snap" into place.

Perhaps I'm doing something unexpected?

I plan to fix this page... so unless you see it soon, the screen shot will have to do.
http://polbase.neb.com/sequences
see
http://imgur.com/InVdN

bwlang

after further investigation i think i've discovered part of the problem...

_fnScrollDraw calculates the tables width and uses that
to set the "header" table's width.
[code]
/* Finally set the width's of the header and footer tables */
var iOuterWidth = $(o.nTable).outerWidth();
nScrollHeadTable.style.width = _fnStringToCss( iOuterWidth );
nScrollHeadInner.style.width = _fnStringToCss( iOuterWidth+o.oScroll.iBarWidth );
[/code]

During initialization that width has one value...but when the function is called after a column is sorted it's width is 52px smaller (changes depending on window size).

If i manually change the width property (in firebug) the header seems to line up okay.

I'm going to explore moving the location of the call to _fnScrollDraw to see if it helps.

bwlang

hah! I've discovered the problem.
javascript later in the code wrapped the table and shrunk it a bit.
This did not shrink the header table though!

Maybe this can be considered a bug... not sure.

edit:
in this case i'm using jquery ui's tabs feature.. the first table displays proper column sizes,
when the tabs are initialized before datatables, but the invisible tabs do not.

this fixes the problem
[code]
$("#views").bind("tabsshow",function(event, ui){
$(ui.panel).find('div.dataTables_scrollBody table').dataTable({"bRetrieve": true}).fnAdjustColumnSizing();
});
{/code]