Header alignment problem
Header alignment problem
First things first, the tool is amazing.
I am using this with asp.net gridview and it works perfectly fine. I am having a problem with the headers and they are disoriented. This happens only when I have ScrollX, ScrollXInner and ScrollY. I have the initialisation code as follows. I was using 1.8.2 and have tried in with the latest 1.9.1 without any luck
[code]
var inner = bshow? 100:130
gvGroupTable = $(gvLGAnalysis).dataTable({
"bAutoWidth": false,
"bProcessing": true,
"bFilter": false,
"sScrollY": 500, "sScrollX": "100%", "sScrollXInner": inner + '%', "bScrollCollapse": true,
"sPaginationType": "full_numbers",
"aoColumnDefs": [
{ "sType": "title-numeric", "aTargets": [8, 9] },
{ "sSortDataType": "dom-span", "sType": "numeric", "aTargets": [10, 11] },
{ "sWidth": (inner / 5) + "%", "aTargets": [22] },
{ "bSortable": false, "aTargets": [0] },
{ "bVisible": false, "bSortable": false, "sWidth": "0%", "aTargets": [2, 3, 4, 5, 14, 23, 24] }
],
"aaSorting": [[1, 'asc']],
"sDom": '<"top">tr<"bottom"lpi><"clear">'
});
[/code]
The alignment is not in the order. When I debugged I found this code doesnt seem to do what it is actually supposed to do.
[code]
anHeadToSize = o.nTHead.getElementsByTagName('tr');
anHeadSizers = nTheadSize.getElementsByTagName('tr');
_fnApplyToChildren(function (nSizer, nToSize) {
oStyle = nSizer.style;
oStyle.paddingTop = "0";
oStyle.paddingBottom = "0";
oStyle.borderTopWidth = "0";
oStyle.borderBottomWidth = "0";
oStyle.height = 0;
iWidth = $(nSizer).width();
nToSize.style.innerwidth = _fnStringToCss(iWidth);
aApplied.push(iWidth);
}, anHeadSizers, anHeadToSize);
[/code]
It is not resizing the fixed header, but the hidden header is perfectly in line with the data. Interestingly, even if I change iWidth = 200, the header doesnt seem to be changed.
Am I missing something silly here? I am working on this for 4 days now and I couldnt get through. Please help.
Cheers, Balaji.
I am using this with asp.net gridview and it works perfectly fine. I am having a problem with the headers and they are disoriented. This happens only when I have ScrollX, ScrollXInner and ScrollY. I have the initialisation code as follows. I was using 1.8.2 and have tried in with the latest 1.9.1 without any luck
[code]
var inner = bshow? 100:130
gvGroupTable = $(gvLGAnalysis).dataTable({
"bAutoWidth": false,
"bProcessing": true,
"bFilter": false,
"sScrollY": 500, "sScrollX": "100%", "sScrollXInner": inner + '%', "bScrollCollapse": true,
"sPaginationType": "full_numbers",
"aoColumnDefs": [
{ "sType": "title-numeric", "aTargets": [8, 9] },
{ "sSortDataType": "dom-span", "sType": "numeric", "aTargets": [10, 11] },
{ "sWidth": (inner / 5) + "%", "aTargets": [22] },
{ "bSortable": false, "aTargets": [0] },
{ "bVisible": false, "bSortable": false, "sWidth": "0%", "aTargets": [2, 3, 4, 5, 14, 23, 24] }
],
"aaSorting": [[1, 'asc']],
"sDom": '<"top">tr<"bottom"lpi><"clear">'
});
[/code]
The alignment is not in the order. When I debugged I found this code doesnt seem to do what it is actually supposed to do.
[code]
anHeadToSize = o.nTHead.getElementsByTagName('tr');
anHeadSizers = nTheadSize.getElementsByTagName('tr');
_fnApplyToChildren(function (nSizer, nToSize) {
oStyle = nSizer.style;
oStyle.paddingTop = "0";
oStyle.paddingBottom = "0";
oStyle.borderTopWidth = "0";
oStyle.borderBottomWidth = "0";
oStyle.height = 0;
iWidth = $(nSizer).width();
nToSize.style.innerwidth = _fnStringToCss(iWidth);
aApplied.push(iWidth);
}, anHeadSizers, anHeadToSize);
[/code]
It is not resizing the fixed header, but the hidden header is perfectly in line with the data. Interestingly, even if I change iWidth = 200, the header doesnt seem to be changed.
Am I missing something silly here? I am working on this for 4 days now and I couldnt get through. Please help.
Cheers, Balaji.
This discussion has been closed.