Horizontal and vertical scrolling not smooth on mobile browsers (Fixed header/column)

absoRaph

Hi,

I am having a bit of an issue. I use datatables to display some huge tables on a website. Now, I need to make a mobile version. Everything works fine when I test it from my desktop browser.

On mobile, when you scroll, the fixed column / header do not scoll with the table. Instead, they move in position AFTER the table has been scrolled. (Tested on iPad, iPhone and Android)

You can this this here (With fixed column): http://www.datatables.net/release-datatables/extras/FixedColumns/index.html
or here (with fixed header): http://www.datatables.net/release-datatables/examples/basic_init/scroll_x.html

Any idea? Is there an easy way I could force the scroll?

allan

The problem is that mobile browsers don't fire the scroll event during the scroll. As such, I'm really not sure that there is anything I can do about it. I am open to suggests from anyone else on how to resolve it though?

Allan

absoRaph

Perhaps making it so that the fixed elements are being positioned while .dataTables_scrollBody is being "touch"?

Is there a function or something in the API I could fire up that would position the elements correctly which I could play with?

Thanks a lot for the quick response.

allan

Sure - positioning for the header is done here: https://github.com/DataTables/FixedHeader/blob/master/js/FixedHeader.js#L598 . The columns have similar functions.

Interest to hear how you get on with it!

Allan

absoRaph

Alright.

The client has accepted to a workaround which doesn't use those features, but I am curious myself so I will definitely put some time on it in my free time.

brucol

Hello,

I use Fixed Column and I have the same little problem than you on ipad. But I can live with it.

However I have a more annoying problem with Fixed Column on Android. The fixed column is not adjusting when scrolling down. Is there any trick to have it work on Android?

Thanks,

Bru

allan

Which version of Android? Some older ones don'ts support position:fixed and there's not much I can do about that!

Allan

brucol

I tested it on Android 4.0.3.

allan

Ah I think I see the problem - the browser isn't firing the scroll event until the scrolling is complete. i think iOS "suffers" from this as well - its to try and reduce processor clock cycles. I suspect it will need more events (touchstart and touchend with a setInterval) to address. Not sure what the best way of doing that just yet is, but I'll add it to the list.

Thanks,
Allan

absoRaph

Yes,

I had ended up doing this mess to make it work:

//This empty function makes it so the scroll event is fired
$('.dataTables_scrollBody').on('touchstart',function (e){});