Header fixed when scrolling horizontally
Header fixed when scrolling horizontally
pmlpvsc
Posts: 1Questions: 0Answers: 0
Hello.
I'm having an issue with the datatables and I was wondering if it happened to somebody else.
The issue is related with horizontal scrolling and the table headers. I'm using datatables in conjunction with bootstrap.
If I set "sScrollX":"100%", an unnecessary horizontal scroll is added, when a vertical scroll is needed.
I've searched the forums and someone suggested to also set the sScrollXInner to 110%. That change did nothing to the table.
Finally, if I set the sScrollX: "", the horizontal scrollbar disappears when not needed. The problem is, when I have a sufficient number of columns so that the horizontal scroll bar is needed (or the needed width is bigger that the available), when scrolling horizontally, the header remains fixed.
Here are the options that I'm using. If you need any more info please let me know.
var dataTableOptions = {
// Data configuration variables
"aoColumns":columns,
"aaData":data,
// Visual configuration of the datatable
"asStripeClasses":[""],
"bLengthChange":false,
"bScrollCollapse":false,
"bInfo":false,
"bScrollAutoCss":true,
// the actual table creation
"sScrollX":"100%",
//"sScrollXInner": "120%",
"bFilter":false,
"bSort":false,
"bProcessing":true,
// Improve performance for very large tables where not all rows are shown
"bDeferRender":true,
"bPaginate": false,
"bAutoWidth": true,
// Force a rebuild of the datatable always
"bDestroy":true,
"sDom" = "rtS";
};
Is there any way around this?
Thanks!
I'm having an issue with the datatables and I was wondering if it happened to somebody else.
The issue is related with horizontal scrolling and the table headers. I'm using datatables in conjunction with bootstrap.
If I set "sScrollX":"100%", an unnecessary horizontal scroll is added, when a vertical scroll is needed.
I've searched the forums and someone suggested to also set the sScrollXInner to 110%. That change did nothing to the table.
Finally, if I set the sScrollX: "", the horizontal scrollbar disappears when not needed. The problem is, when I have a sufficient number of columns so that the horizontal scroll bar is needed (or the needed width is bigger that the available), when scrolling horizontally, the header remains fixed.
Here are the options that I'm using. If you need any more info please let me know.
var dataTableOptions = {
// Data configuration variables
"aoColumns":columns,
"aaData":data,
// Visual configuration of the datatable
"asStripeClasses":[""],
"bLengthChange":false,
"bScrollCollapse":false,
"bInfo":false,
"bScrollAutoCss":true,
// the actual table creation
"sScrollX":"100%",
//"sScrollXInner": "120%",
"bFilter":false,
"bSort":false,
"bProcessing":true,
// Improve performance for very large tables where not all rows are shown
"bDeferRender":true,
"bPaginate": false,
"bAutoWidth": true,
// Force a rebuild of the datatable always
"bDestroy":true,
"sDom" = "rtS";
};
Is there any way around this?
Thanks!
This discussion has been closed.