SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Jul 2006
    Location
    Fionnphort, Isle of Mull, Scotland
    Posts
    356
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Behaviour on mobile phone differs from that in desktop browser

    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 ?
    Tim Dawson
    Isle of Mull, Scotland

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ramasaig View Post
    My main problem right now is getting a table to scroll vertically on the mobile.
    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.
    Code:
    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. #3
    SitePoint Addict
    Join Date
    Jul 2006
    Location
    Fionnphort, Isle of Mull, Scotland
    Posts
    356
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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 ?
    Tim Dawson
    Isle of Mull, Scotland

  4. #4
    SitePoint Addict
    Join Date
    Jul 2006
    Location
    Fionnphort, Isle of Mull, Scotland
    Posts
    356
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    Tim Dawson
    Isle of Mull, Scotland

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ramasaig View Post
    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 ?
    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. #6
    SitePoint Addict
    Join Date
    Jul 2006
    Location
    Fionnphort, Isle of Mull, Scotland
    Posts
    356
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.
    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.
    Tim Dawson
    Isle of Mull, Scotland


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •