Scroller _fnCalcRowHeight : Fix rows skipping/jumping when scrolling issue

TheLuke

Sorry if this isn't the right spot or there is already a thread about this but I couldn't find one.

I had an issue with the Scroller plugin where it would skip rows when scrolling (scroll to a spot, redraw, end up on a different row). It came down to the row height calculation being incorrect for two reasons:

1. My rows have input elements in them which mean that the height of the row is greater then that of a blank cell.
After diving into the code I figured the easiest fix was to use css to style my tbody tr's to the correct height so that a blank cell
matched the actual row height.

2. The row height calculation didn't seem to perfectly take into account my borders in chrome for some reason.
In order to solve that I implemented the a change to following code, take note of the last 5 lines. Not sure if it is
the best solution but it worked perfect and removed the row skipping.

[code]
"_fnCalcRowHeight": function ()
{
var
nDiv = document.createElement('div'),
nTable = this.s.dt.nTable.cloneNode( false ),
nBody = document.createElement( 'tbody' ),
nTr = document.createElement('tr'),
nTd = document.createElement('td');

nTd.innerHTML = " ";
nTr.appendChild( nTd );

nBody.appendChild( nTr );

nTable.appendChild( nBody );
nDiv.className = this.s.dt.oClasses.sScrollBody;
nDiv.appendChild( nTable );
document.body.appendChild( nDiv );
var initialHeight = $( nBody ).height();
nBody.removeChild( nTr );
var afterRemoval = $( nBody ).height();
document.body.removeChild( nDiv );
this.s.rowHeight = initialHeight - afterRemoval;
}
[/code]

I figured I would post this because it is a pretty simple fix but took me a while to figure out. I love DT by the way. bDeferRender is a Life Saver!

TheLuke

And this is technically a touch more efficient:

[code]
"_fnCalcRowHeight": function ()
{
var
nDiv = document.createElement('div'),
nTable = this.s.dt.nTable.cloneNode( false ),
nBody = document.createElement( 'tbody' ),
nTr = document.createElement('tr'),
nTd = document.createElement('td');

nTd.innerHTML = " ";
nTr.appendChild( nTd );
nBody.appendChild( nTr );
nTable.appendChild( nBody );
nDiv.className = this.s.dt.oClasses.sScrollBody;
nDiv.appendChild( nTable );
document.body.appendChild( nDiv );
var h = $( nBody );
var a = h.height();
nBody.removeChild( nTr );
var z = h.height();
document.body.removeChild( nDiv );
this.s.rowHeight = a - z;
}
[/code]

allan

Hi,

Are you able to link me to your page showing this problem please? That would give me something to work on.

> 1. My rows have input elements in them which mean that the height of the row is greater then that of a blank cell.

In Scroller all rows _must_ be the same height or all bets are off with the table :-). If some rows are a different size, then I'm afraid that it won't work, positioning will be all wrong etc. Is this the case?

> 2. The row height calculation didn't seem to perfectly take into account my borders in chrome for some reason.

Very interesting - thanks for the fix. I'll look into this for the Scroller 1.0.3 development.

> I love DT by the way. bDeferRender is a Life Saver!

Thanks very much :-)

Allan