How to scroll horizontally in Jquery Mobile?

Question

I've a basic table layout that gets cut when viewed in mobile. Horizontal scrolling doesn't appear to work. The table is basically stuck and cutoff. Only vertical scrolling works. Is it possible to enable horizontal scrolling in Jquery Mobile?

Screenshot on desktop browser:

Screenshot on mobile:

Screenshot on resized desktop browser (horizontal scroll also doesn't work):

Sample code:

<div style="overflow-x:auto">
<table> 
        <tr>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>        
        </tr>
</table>            
</div>

BTW if I remove <meta name="viewport" content="width=device-width, initial-scale=1"> horizontal scrolling works but then the mobile's width has become big and the purpose of mobile view is quite defeated. Any workaround?

Answer 1

I believe you could set your viewport meta tag to a specific width that matches your content. That way you can limit how wide your page becomes.

<meta name="viewport" content="width=600px, initial-scale=1">

In a general sense this is frowned-upon since it's not responsive like width=device-width is but in this context it sounds like what you need.

NOTE: This is untested, I've never used a pixel value for the width declaration in a viewport tag before. My understanding is that this should make everything appear by default, then the user can zoom in/out to make the text easier to read.

The well-supported alternative is to use faux-scrolling with JavaScript. There are pre-made solutions like iScroll 4 (others are out there too but they're escaping me at the moment).

If you're interested, here is the Apple documentation for the viewport meta tag: http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html (which Apple started using before other browser makers)