scrollbar drops to the bottom of the page?

Pierce Krouse

Allan: I have a persistent style problem in the following live link
http://live.datatables.net/jawevuri/1/edit

When you have your window wide enough to show the whole table, things look ok.
When you start off with your window too narrow, but long enough to show the whole depth, the horizontal scrollbar is at the bottom of the table, which is right.

If you alter the width at all, the scrollbar drops to the bottom of the page.

As per your suggestion, I solved a similar problem with the vertical scrollbar with this:

div.dataTables_wrapper{
  display:inline-block;
  max-width:100%;
}

But max-height does not give me the same behavior with the horizontal scrollbar

allan

In the on_resize function you have:

$('div.dataTables_scrollBody').css('height', newHt, 'maxHeight', newHt);

(in both sections of the if/else).

That is the goal of that code? There should be no need to modify the scrollbar height, and indeed if I comment it out, the table scrollbar stays at the bottom of the table as expected: http://live.datatables.net/jawevuri/2/edit .

Allan

Pierce Krouse

The goal of that code is to make the scrollable portion of the table use all the available space given to it by a resize. With those lines commented out, shrink your height until the table needs more space. You will end up with a scrollbar on the right that scrolls all of the page's contents, and I want the page content, and the table header, to remain visible all the time.

Pierce Krouse

I looked back at the code in my section that is activated when the window height is high enough to accommodate the whole table. This is the area where the scrollbar is going all the way to the bottom of the page.

Allan, DataTables is doing exactly what it should do. I was calculating the wrong value and telling the scrollable area to take up all the available space.

I'm sorry I wasted your time on this, so to try and make it up to you, I'll give the forum my solution to the problem:

I am taking advantage of the fact that all my rows are the same height. I am counting the number of rows visible:

var rowz = Number(oTable.page.info().recordsDisplay);

And multiplying that by the height in pixels of the first row:

var getFirstRowHeight = function(){
  var capcha = $('#lynx_table_1 tbody:first tr:first').css("height");
  return parseInt(capcha, 10);
};

That gives me the height in pixels to use for the scrollBody:

var newHt = pixelHt+'px';
$('div.dataTables_scrollBody').css('height', newHt, 'maxHeight', newHt);

This is not perfect, but it gets me in the ball park for now.

Pierce Krouse

I should add, that if there is a better way to get datatables 1.10 to use the remaining space in the container without getting down to pixel sizes, I'd be interested.

allan

Not a problem at all. Good to hear that you've got it working the way you need now!

There isn't a built in way of doing what you are looking for, but I did write a plug-in that would do what is needed - assuming you have a container element that will display as required (as the code bases itself off the container element - it could be position:absolute which makes it fairly easy).

Allan

Pierce Krouse

The plug-in looks interesting! I'll see if it works with the tables I am generating.