Fixed table height causing random row heights if less than one page of data

bwpc

I want my DataTables to use 100% of the height that it has available to it so I am using tricks from other posts in this board to resize the grid appropriately. Works great. AS LONG as I have more than a page worth of data.

As a test, I turned off the code that is resizing the table to a fixed height and then the rows are always the same height, but the grid is now also smaller. This looks bad....

So I reenable the fixed height code that is inside a smartresize function:
$('div.dataTables_scrollBody').css('width', calcDataTableWidth());
$('div.dataTables_scrollBody').css('height', calcDataTableHeight());
searchResultsTable.fnAdjustColumnSizing();


As soon as I search and I no longer get back enough rows to even fill one page, the DataTables is expanding each row height the same to fill up that space. For example, if I only get one result back, the entire height is one row with the contents vertically centered. If I get back 4 rows, now each row is 25% of the height available.

I tried setting the rowheight using: "oScroller": { "rowHeight": 21 },
but no luck.

The rows still grow in height once I have less than a page worth of data. Any ideas on how to fix this?

bwpc

Please help. Any ideas?

In spying at the html, I see that a class odd/even is applied to the rows, and I set that to have a fixed height, but no luck.

In looking further at the html, it almost looks like I need to somehow get the grid to determine that there are not enough rows to fill up that space, and then insert an empty row to fill in whatever is left over.

Anybody else having issues with a fixed height grid and less than one page of data?

bwpc

Well, I've come up with a fix, it's not perfect, but it's working for me so far. Now if less than one page comes back on the first ajax call, I insert an extra empty tr with height 100% to fill in the remaining space.

But now I need to remember to patch every future update. Would be nice though if the grid could figure out whether or not it needs to add this filler TR set to height 100%

I added this snippet of code into fnDraw right after it renders the rows (line 1282 in ver 1.9.3)

if (oSettings._iRecordsTotal <= oSettings._iDisplayLength) {
var fillerTr = document.createElement('tr');
fillerTr.setAttribute('style', "'height:100%'");
var fillerTd = document.createElement('td');
fillerTd.innerHTML = " ";
fillerTr.appendChild(fillerTd);
anRows.push(fillerTr);
}