Details view scrolling on Mobile Platforms

dcsmith3

Hi,
I've been using Datatables very successfully in a Phonegap/Cordova app until I hit a stumbling block with the detail rows. I am working on an app that can be used to track livestock. I have a very long list of details that I want to show in a table when the left column is clicked. The problem is that the list overflows the height of the table and no scroll bar is appearing. I tried to make a JS Fiddle to demonstrate, but of course it worked fine on the desktop browser. Here it is: http://jsfiddle.net/p817fmx3/1/

To see what I want it to look like, click the left column to expand any of the rows. Notice how the child table is scroll-able. Does anybody know why I can't get the same effect on a phone or tablet?

I'm using the 1.10.2 release, by the way.

Thanks!

allan

You've done more or less everything I would have suggested myself. I guess you are hitting a "bug" in model browsers that perhaps don't allow a double scroll (at a guess). If you disable scrollY in DataTables, does the inner scroll then work on your mobile device?

Allan

dcsmith3

Thanks so much for your help! The idea that double scroll bars weren't supported gave me a couple new ideas but nothing seems to be working. Here's what I've done:

I removed the scrollY option and that didn't seem to help. I think it needs to be there anyway, since that's what is forcing the table height to match the height of the device which is what I wanted the layout to be. Other things I tried were enclosing the newly created table in a div with data-role panel. I think that's a jquery mobile feature that was supposed to implement this, but that didn't work either. Could it be that jquery mobile needs to re-run some function to transform the added HTML?

My backup plan is to skip the double scrollers and enlarge the table to fit the new information, so the entire grid would scroll. I found a lot of posts on there saying how to dynamically increase the height but I'm still having some trouble. I added this line to the click function of the show details column to increase the height:

$(".dataTables_scrollBody").css("height", (($(window).height() - 283) + $("#divDetails").height()));

and this to bring it back to normal when the details are closed:

$(".dataTables_scrollBody").css("height", ($(window).height() - 283));

At this point I don't really care which option I use, double scrolls or changing the height, so if you can help me with either one I'd definitely appreciate it. Thanks so much!

If my descriptions of the changes are difficult to follow let me know and I will update the JS Fiddle.

dcsmith3

I thought I'd update this since I have some new information. As it turns out, the table is not scrolling at all. I've been continuing to work on other things and I loaded a large data file into the table. Lo and behold I get no scroll bar at all!

Unfortunately I can't replicate the problem on a emulator like Ripple and the JS Fiddle works so I think it has to be some quirk of the mobile browser. I'm still new to mobile development and Phonegap so I'm probably missing something very obvious. Any suggestions?

allan

Not really I'm afraid. I've not seen DataTables not scrolling myself, but I haven't tried using Phonegap yet. If you aren't getting a scrollbar at all, and the scrollY option is set, and the height is small enough that the table should be scrolling, then I guess you will either need to debug the page (difficult if it can't be reproduced in an emulator, although I think Safari can connect its debugger to a mobile), or possibly contact Phonegap.

Allan

dcsmith3

Ok, thank you very much for trying!

dcsmith3

I solved the issue. I was trying to test in Chrome remote debugging and switched to a newer android device since I needed one running KitKat, the latest release supporting remote debug. Of course, when I loaded my app on the newer device, everything worked!

It turns out that support for overflow tags in CSS was not so great before Android 3. There's an article with lots of good info here: http://stackoverflow.com/questions/7768363/how-much-support-is-there-for-webkit-overflow-scrollingtouch

allan

Oh wow - you were using a proper old Android version!? Yeah - scrolling on mobiles was bad - and really still not brilliant imho. Position:fixed is a nightmare to use...

Allan