Table column headers incorrectly aligned when using scrollY option
Table column headers incorrectly aligned when using scrollY option
rv_nath
Posts: 7Questions: 0Answers: 0
Hello Allan,
I am using DataTables 1.9.4 with Bootstrap. Things worked perfect and fine until I needed to use scroll option. After enabling the sScrollY,the column headers get shrunk to the left side. On clicking the headers, they get aligned correctly. But there is still a gap of about 1 empty row between the header row and body rows.
I have read the rules of posting and wanted to create a test case either with jsfiddle or datatables live. Unfortunately, I am unable to get links for bootstrap cdn...
Here is the code I am using: Sorry that the code is a bit lengthy...
HTML markup:
[code]
Choose a Pricing Option from below, or Create New Price Def
Price Def
Price
Fallback Opts
Rate Codes
Time Bands
pd1
100
None
None
None
pd2
100
None
None
None
pd3
100
None
None
None
pd
100
None
None
None
pd
100
None
None
None
pd
100
None
None
None
pd
100
None
None
None
pd
100
None
None
None
pd
100
None
None
None
$(function() {
window.priceTable = $("#price-list").dataTable({
"sDom" : "t<'span7'pr>",
//"sScrollY" : "200px",
"bPaginate" : true
//"bScrollCollapse" : true,
//"bAutoWidth" : true,
//"sScrollX" : "100%",
//"sScrollXInner" : "100%"
});
$(window).resize(function() {
window.priceTable.fnAdjustColumnSizing();
});
$(window).trigger('resize');
});
$('#price-def').on('change', function() {
if ($('#price-def').is(':checked')) {
$('#price-list').removeClass('inactive-table');
$('#price-list').contents().contents().contents().css('color', '');
$("#new-price").addClass('inactive');
} else {
$('#price-list').addClass('inactive-table');
$('#price-list').contents().contents().contents().css('color', '#cecece');
$("#new-price").removeClass('inactive');
}
});
$.extend($.fn.dataTableExt.oStdClasses, {
"sWrapper" : "dataTables_wrapper form-inline"
});
[/code]
regards,
RV
I am using DataTables 1.9.4 with Bootstrap. Things worked perfect and fine until I needed to use scroll option. After enabling the sScrollY,the column headers get shrunk to the left side. On clicking the headers, they get aligned correctly. But there is still a gap of about 1 empty row between the header row and body rows.
I have read the rules of posting and wanted to create a test case either with jsfiddle or datatables live. Unfortunately, I am unable to get links for bootstrap cdn...
Here is the code I am using: Sorry that the code is a bit lengthy...
HTML markup:
[code]
Choose a Pricing Option from below, or Create New Price Def
Price Def
Price
Fallback Opts
Rate Codes
Time Bands
pd1
100
None
None
None
pd2
100
None
None
None
pd3
100
None
None
None
pd
100
None
None
None
pd
100
None
None
None
pd
100
None
None
None
pd
100
None
None
None
pd
100
None
None
None
pd
100
None
None
None
$(function() {
window.priceTable = $("#price-list").dataTable({
"sDom" : "t<'span7'pr>",
//"sScrollY" : "200px",
"bPaginate" : true
//"bScrollCollapse" : true,
//"bAutoWidth" : true,
//"sScrollX" : "100%",
//"sScrollXInner" : "100%"
});
$(window).resize(function() {
window.priceTable.fnAdjustColumnSizing();
});
$(window).trigger('resize');
});
$('#price-def').on('change', function() {
if ($('#price-def').is(':checked')) {
$('#price-list').removeClass('inactive-table');
$('#price-list').contents().contents().contents().css('color', '');
$("#new-price").addClass('inactive');
} else {
$('#price-list').addClass('inactive-table');
$('#price-list').contents().contents().contents().css('color', '#cecece');
$("#new-price").removeClass('inactive');
}
});
$.extend($.fn.dataTableExt.oStdClasses, {
"sWrapper" : "dataTables_wrapper form-inline"
});
[/code]
regards,
RV
This discussion has been closed.
Replies
screenshot after initializing datatables, but before header click: http://picpaste.com/dt_before-x23CuOyu.png
Screenshot after clicking the header row: http://picpaste.com/dt_after-l7UXnLe1.png
Now the problem is, at what point of time should I call this fn? For this I need 2 know when the datatables has finished data loading (either static data or ajax).
I tried calling fnAdjustCol...() in the Draw callback fnDrawCallback, but then it seemed to go in a recursive loop. That is, each call to fnAjust...() resulted in Draw event, which again invokes fnAdjust.
One option could be to use a timer and wait for sometime to let Datatables finish.
Is there a better alternative?
Allan