Behaviour on mobile phone differs from that in desktop browser

Mobile
1

I am converting a site to responsive design. As seen here. I am able to get my responsive version to look and behave as I want in my Firefox desktop browser (viewport reduced to 320x480 pixels). Most features also work on my mobile phone (Galaxy Ace). But some won’t.

My main problem right now is getting a table to scroll vertically on the mobile. On desktop, of course, I get a vertical scroll bar, and I’d hoped it would respond to a swipe on the mobile, but it doesn’t. Additionally I have expanded the table cells (with top and bottom padding) so the links are easier to select by touch, but this padding doesn’t reach the mobile either. The page with this table is shown in the link above.

I get the impression this may be a common problem, but none of the suggestions I’ve seen (mostly to do with ‘overflow’) have worked for me so far, so perhaps I’ve done something wrong.

Any suggestions, please ?

2

It’s working on the iphone and ipad although with older ios devices you will need to use a two finger scroll approach. However, as not many users know about that it may simply be better to remove the vertical scroll and let the table take up its full height on mobile.

You can make it more obvious that the table needs to scroll (on ios) by applying -webkit scrollbars.


table {
 overflow:auto;
}
table::-webkit-scrollbar {
 height:12px;
}
table::-webkit-scrollbar-track {
 box-shadow:0 0 2px rgba(0,0,0,0.15) inset;
 background:#f0f0f0;
}
table::-webkit-scrollbar-thumb {
 border-radius:6px;
 background:#ccc;
}

That will put scrolbars on the table in -webkit (with any luck) and encourage people to scroll the area.

Of course some older devices may not let you scroll at all anyway.

3

Thanks again, Paul.

Two finger scroll appears to require the user (?) to have it installed, so if normal scrolling won’t work in Android (or not mine, at least), it may well be necessary to show the whole table. Snag is it’s 365 lines long (reducing as the year progresses).

I’ll give the webkit scrollbars a try, but I don’t have any means of testing at present.

The other thing that doesn’t work on my phone is the top and bottom padding on the cells. Did that work on your iPhone/iPad ?

4

Some progress since my first reply.

I’ve got the full table to display, and the cell-padding has taken effect, so now it’s easier to select a date. Still unsure why that didn’t work earlier, but now I have a better chance to work that one out.

Thanks again for your help.

5

Yes that was working OK on the ipad and iphone when I tested. You may have had a cache issue or something when you tested.

6

I think that’s right. It seems easy to refresh the page on my Galaxy Ace, but I’m far from convinced that that also clears the cache (why should it, indeed). I’m not a regular smart phone user, so I have some learning to do here.