scroll with fixedcolumn

dmartinez

Hi, i'm working with datatable fixedcolumn, i have fixed the left column and im not using the sScrollXInner property.. so.. the problem is when i move the vertical scroll to down, to the end, the last row of the left column is moved in relation with others columns.. the reason is the espace of the horizontal scroll in the columns witch doesnt are fixed.. my question is: how i can put a space as a scroll under the fixed columns to solve that situation??.. or any other solutions??

allan

Can you link to the page where you are seeing this problem please? FixedColumns should already be able to cope with this, but its possible that I miss one of the combination of factors.

Allan

dmartinez

http://www.datatables.net/release-datatables/extras/FixedColumns/scale_relative.html

it is the link brother.. look,in the example when you move the scroll to down, to the last row, there is a white space under the left column.. in my case the white space isnt there.. i saw when i put "sDom": "frtiS" on comment, its work..but later i lost the scroll position :(... before i make some changes on Scroller.js to save the scroll position like that:


/* Insert a div element that we can use to force the DT scrolling container to
* the height that would be required if the whole table was being displayed
*/
this.dom.force.style.position = "absolute";
this.dom.force.style.top = "0px"; HERE***************** this.dom.force.style.left = "0px"; *********************
this.dom.force.style.width = "1px";







HERE
*********************

/* Add a state saving parameter to the DT state saving so we can restore the exact
* position of the scrolling
*/
this.s.dt.aoStateSave.push( {
"fn": function (oS, sVal) {
return sVal+',"iScroller":'+that.dom.scroller.scrollTop;
},
"sName": "Scroller_State"
} );

/* Add a state saving parameter to the DT state saving so we can restore the exact
* position of the scrolling
*/
this.s.dt.aoStateSave.push( {
"fn": function (oS, sVal) {
return sVal+',"iScrollerLeft":'+that.dom.scroller.scrollLeft;
},
"sName": "Scroller_State"
} );

*******************


AND HERE


/* Restore the scrolling position that was saved by DataTable's state saving
* Note that this is done on the second draw when data is Ajax sourced, and the
* first draw when DOM soured
*/
if ( this.s.dt.oFeatures.bStateSave && this.s.dt.oLoadedState !== null &&
typeof this.s.dt.oLoadedState.iScroller != 'undefined' )
{
if ( (this.s.dt.sAjaxSource !== null && this.s.dt.iDraw == 2) ||
(this.s.dt.sAjaxSource === null && this.s.dt.iDraw == 1) )
{
setTimeout( function () {
$(that.dom.scroller).scrollTop( that.s.dt.oLoadedState.iScroller );
$(that.dom.scroller).scrollLeft( that.s.dt.oLoadedState.iScrollerLeft );
that.s.redrawTop = that.s.dt.oLoadedState.iScroller - (that.s.viewportHeight/2);
}, 0 );
}
}

to save the horizontal scroll position... it works fine (it save the horizontal and vertical scroller position fine when the page reload)

but.............. when i put (on comment "sDom": "frtiS") to solve the white space on the column the scroll return to begin when the page reload :(

what can i do my friend??..



this is the configuration of my datatable:


$(document).ready(function() {
var oTable = $('#categories').dataTable( {

"bPaginate": false,
"sScrollY": "400px",
"sScrollX": "100%",
"sDom": "frtiS",
"bDeferRender": true,
"bScrollCollapse": true,
"bLengthChange": false,
// "oScroller": { "rowHeight": 30 },
"bFilter": true,
"bSort": true,
"bInfo": false,
"bAutoWidth": false,
//"aoColumnDefs": [{ "sWidth": "10%", "aTargets": [ 1 ] }] ,
"bStateSave": true} );

new FixedColumns( oTable );
} );

dmartinez

when i remove Scroller.js everything work fine.. im using ie 8

graeme

I am noticing the same issue in ie8 on the example provided above:

http://www.datatables.net/release-datatables/extras/FixedColumns/scale_relative.html

With webkit, you will see a final row of whitespace on the fixed columns (to make up for the added horiz scrollbar) but not IE8. Is there a method to add the needed whitespace at the bottom of the fixed columns for ie8?

Any help is appreciated.

graeme

Note, also reported as a bug here: http://www.datatables.net/forums/discussion/6543/scroll-to-bottom-with-fixed-columns/p1

allan

I need to download an IE8 VM I'm afraid (haven't got one knocking about atm), so that's going to take a while on my internet connection... I've just tried it in IE9 in IE8 mode and it seems to work okay there.

Allan

graeme

Ditto. I've just started using Datatables [amazing btw] but if you can tell me where FixedColumns is rendering that extra whitespace (clearing divs/injecting an extra space?) then I can take a look and try some adjustments for IE8. I am assuming there is some specific css/js that is padding the bottom of the fixed columns to compensate for the horizontal scrollbar that is added to the the non-fixed columns?

allan

It is done here: https://github.com/DataTables/FixedColumns/blob/master/media/js/FixedColumns.js#L807 . Line 808 there should be doing what IE needs from the comment, but I guess it isn't enough...

If you haven't tried the 2.0.2.dev version yet it might be worth trying that (although those lines are in the current release, so possibly not that): http://datatables.net/download/ .

I'll download the IE8 VM image tonight and see if I can get that going.

Allan

graeme

Interestingly, I started working through the source and making some trial and error adjustments. In _fnGridHeight I made the following adjustment (-15) on the left grid height and it seemed to work in IE8, IE9, Chrome15 and FF7.

L589: oGrid.left.body.style.height = $(this.dom.scroller).height()-15+"px";

This creates a permanent white space in the footer of the left column equal to the size of the horizontal scroller on the main grid; although the left column doesn't look as nice not being flush against the footer I think it makes the heights more equal and therefore when you scroll to the bottom the grids remain aligned. I can live with this. I'm sure there is a more elegant way to determine the scrollbar height instead of a constant.

Hope this helps, and thanks Allan!

mrullo

@graeme, that solution worked perfectly for me, thank you. My issue was in IE 8.

@Alllan, is this a fix that could be integrated into the build? I just don't want to deviate from the build too much. Also, thanks a million times for this library, life is good.

Cheers

jhaitas

@graeme ... you may want to add a ' margin-bottom' style in case there is a footer in your table ...

something like:
oGrid.left.body.style.marginBottom = 15+"px";

... it would be good to autocalculate the height of the scrollbar ... because it is not the same across browsers ... but this dirty fix works for now

eleventh

Hi, may i know if this is fixed already? I am using FixedColumns version 2.0.3 but i am still having this issue on IE8 (IE7, IE9 is good). I have been pulling my hair on this one for more than 1 day already... Here are my codes:

[code]
var oTable = $('#thetable').dataTable({
bPaginate: false,
bInfo: false,
bFilter: false,
bAutoWidth: false,
bSort: false,
sScrollX: "100%",
sScrollXInner: products.length * 200,
sScrollY: $(window).height() - $('th.header').outerHeight()
});

var fixedColumns = new FixedColumns(oTable, {
sLeftWidth: 'fixed',
iLeftWidth: 200 // pixel
});

$(window).on('resize', function () {
oTable.fnDraw();
var scrollYHeight = $(window).height() - $('th.header').outerHeight();
$('.dataTables_scrollBody, .DTFC_LeftBodyWrapper').height(scrollYHeight);
});
[/code]

My table is a full window comparison table, same as the comparison table on dpreview.com, http://www.dpreview.com/products/compare/side-by-side?products=canon_eos1dc&products=canon_eos650d&products=canon_eos60da&products=canon_eos5dmkiii&products=canon_elph320hs&products=canon_elph530hs

I am calculating the xScrollY to get the actual scrollable height. On each resizing, i am updating the height on the relevant elements to reupdate the sScrollY - not sure if this is the correct way to do it.

Thanks! Any help is appreciated!

eleventh

FYI, i managed to fix it. But it's definitely not an elegant solution. But it works for me now...

I changed it at the onscroll event handler and check that the scrollTop value. If the left table scrolltop is lesser than the right body scroller, i will update the difference with margin-top on the left table...

[code]
/* Event handlers */
$(this.dom.scroller).scroll( function () {
that.dom.grid.left.body.scrollTop = that.dom.scroller.scrollTop;

// to fix ie8 issue when right scrollbody is scrolled all the way to bottom and the lefttable is not synchronized.
// To reproduce the problem remove these lines.
if ($.browser.msie && $.browser.version < 9) {
var leftTable = $(that.dom.grid.left.body);
if (that.dom.scroller.scrollTop > that.dom.grid.left.body.scrollTop) {
leftTable.css('margin-top', that.dom.grid.left.body.scrollTop - that.dom.scroller.scrollTop);
} else {
leftTable.css('margin-top', 0);
}
}
// End fix

if ( that.s.iRightColumns > 0 )
{
that.dom.grid.right.body.scrollTop = that.dom.scroller.scrollTop;
}
});
[/code]