FixedHeader column headers not changing on window resize
FixedHeader column headers not changing on window resize
_g_
Posts: 11Questions: 0Answers: 0
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) + .
That example is just the default example + FixedHeader({"left":true}) + remove the "container" div (so the table is not fixed width) + .
This discussion has been closed.
Replies
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
... 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.
[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
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.
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
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).