FixedHeader column headers not changing on window resize

_g_

When I have enabled FixedHeader with {"left":true}, the column headers don't change width when the table is resized. You can see the problem here: http://live.datatables.net/akedig if you load (looks fine) then resize the window so the table and column widths change.

That example is just the default example + FixedHeader({"left":true}) + remove the "container" div (so the table is not fixed width) + .

_g_

Correction, {"left":true} is not necessary to see the breakage. http://live.datatables.net/akedig/2

allan

Thanks for the test case - sorry that you've discovered (another) bug in FixedHeader here.

Unfortunately this one isn't going to be trivial to fix and I'll need to get back to you on this. I will make sure that this is done before 2.1.0 is released.

Regards,
Allan

_g_

Thank you.

tonym

Don't know if this issue is still live or there is a more elegant solution but I ran into it the other day and can offer the following work-around ...

... and in your script file add ...
function ResetColHeadings() {
oTable.fnAdjustColumnSizing();
}
... where oTable is the object returned when attach DataTables to your html table ...
var oTable = $('#myTable').dataTable(...);

I am relatively new to Javascript and to DataTables so cut me some slack if this is untidy ... but it works for me.

allan

Its a fair enough approach :-). I'd suggest you use something like:

[code]
$(window).on('resize', function () {
table.fnAdjustColumnSizing();
} );
[/code]

instead though. Two advantages: 1. No change in your HTML needed. 2. Complete separation from the context - in your example you need a global variable called `oTable` while with the jQuery solution there is no need for a global - you just assign it in with the DataTable initialisation.

Allan

markmarz

Hi Allan,

Sorry, I need your comment [quote] .. just assign it in with the DataTable initialization[/quote] spelled out with a code snippet, if you would.

Thanks!
Mark M.

mfields

Allan,

Thanks for your hard work on DataTables, especially the FixedHeader module. I've been searching high and low for something like this that works well across browsers, including mobile devices and this is the best by far!

I'm running into this same issue - the column width's are incorrect upon resizing the browser. I'm not using DataTables, just applying FixedHeader to an HTML table, is there a similar workaround available?

Thanks,

Marcus

pejohnst

Allan,
First off, let me add my thanks for all of your hard work in writing this plug-in. I love it!

I was having the same problem, so I made a few mods.

FYI - I am using FixedHeader directly against an HTML table like Marcus.

Added this function in the 'Support functions' section:
_fnClearTableColumnWidths: function () {
var s = this.fnGetSettings();
$(s.nTable).children("thead").children("tr").children("th").css('width', '');
$(s.nTable).children("thead").children("tr").children("td").css('width', '');
},

Added this as the first line of the $(window).resize function:
that._fnClearTableColumnWidths();

That allows the table to auto-resize without the widths before the new measurements are taken and clones re-created.

Also, changed the defaults for oCloneOnDraw:
"oCloneOnDraw": {
"top": true,
"bottom": true,
"left": true,
"right": true
},
The setting for "top": false was causing the cloning of the header to short-circuit on redraws - although I could have just specified that as a parameter when calling FixedHeader (I think true should be the default, however).

Not sure if this is the most elegant solution, but it is currently working for me (although not yet thoroughly tested/used in beta/production environment).