Double vertical scroll bars when using fixed header & footer

Boilermaker80

The <div> containing my DataTable displays 2 vertical scrollbars, one of which scrolls the outer part of the table containing the header and footer, with the other scrolling the table data. I'd like to have a single vertical scroll bar that scrolls the data, and fixed header and footer. I'm using the fixedHeader.header & footer options, which I expected to have this effect.

My DataTable is created using the following Javascript:

$(document).ready(function() {$('#fileTable').DataTable({'columns':[{'data':'filename'},{'data':'created'},{'data':'modified'},{'data':'type'},{'data':'size'}],select:{style:'os'},'order':[[0,'asc']],ajax:{url:'/getFiles?/'},paging:false,scrollY:'90vh',stateSave:true,stateDuration:-1,language:{emptyTable:'No files found'},scrollCollapse:true,fixedHeader:{header:false,footer:true},colReorder:true});});

The fixedHeader and colReorder exensions are installed.

The table is in a <div> with id "files", to the right of another <div> with id "folders", and both are inside a <div> with id "parent". The "skeletonized" HTML for the page is:

<div id='outer' style='position:absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; width:100vw; height:100vh; margin: 0; padding:0;'>

```

<div id='parent' style='position:absolute; width:calc(100% - 2px); height:calc(90% - 2px); border:1px solid black; margin:0; padding:0;'>

<div id='folders' class='ui-resizable'; style='width:25%; height:calc(100% - 2px); border:1px solid black; float:left; position:relative; top:0px; left:0px; bottom:0px; overflow:auto;'></div>

<div id='files' style='width:calc(75% - 4px); height:calc(100% - 2px); border:1px solid black; float:left; position:relative; top:0px; right:0px; bottom:0px; overflow:auto;'>

<table id='fileTable' class='display hover' style='width:100%; height=100%;'>

<thead><tr><th style='width:58%;'>Name</th><th style='width:14%;'>Date Created</th><th style='width:14%;'>Date Modified</th><th style='width:5%;'>Type</th><th style='width:9%;'>Size</th>

<tbody></tbody></table>

</div></div></div>

kthorngren

Likely the problem is due to the documented incompatibility between FixedHeader and ScrollY:
https://datatables.net/extensions/fixedheader/

Kevin

Boilermaker80

Good theory, but removing fixedHeader didn't solve the problem. I even configured a new download without the fixedHeader extension and still have 2 vertical scroll bars.

$(document).ready(function() {$('#fileTable').DataTable({'columns':[{'data':'filename'},{'data':'created'},{'data':'modified'},{'data':'type'},{'data':'size'}],select:{style:'os'},'order':[[0,'asc']],ajax:{url:'/getFiles?/'},paging:false,scrollY:'90vh',stateSave:true,stateDuration:-1,language:{emptyTable:' '},infoCallback: function(settings, start, end, max, total, pre) { if (0 == max) { return 'No files found'; } if (1 == max) { return '1 file found'; } return max + ' files found';},scrollCollapse:true,colReorder:true});});

kthorngren

I copied your code into this test case:
http://live.datatables.net/pikecidu/1/edit

Added a column at the end just to make it easy for me to use the preloaded table data.

I'm not seeing two vertical scroll bars. Maybe I missed something.

Kevin

Boilermaker80

Nor do I, unless I add enough data to the table to go beyond the viewing area. Then the <div> goes from no vertical scrollbar to two.

kthorngren

Maybe you can update the test case to replicate your issue. There are 57 records rows of data in the test case.

Or maybe you can provide a link to your page.

Kevin

Boilermaker80

I'll do that. May be tomorrow before I can work on it.