IronicMuffin
IronicMuffin

Reputation: 4192

How do I display a scrolling div (or other container) on a mobile browser?

I am currently writing a Terms and Conditions page for a wireless hotspot captive portal.

I want to display the length Ts and Cs in a div and let the user scroll through them if they desire.

Easy enough for non-mobile browsers:

 <div id="terms" data-theme="a" style="overflow: scroll; height: 200px;">
      <p>@Html.Raw(ViewBag.Terms)</p>
 </div>

When I view the page on my mobile device, I get a div that feels like overflow: hidden and no scrolling. I've read that two finger scrolling works on iOS devices, but I need Android to work as well.

I'm using the newly released jQuery Mobile framework.

An alternate solution that would be agreeable to me is some kind of scrolling dialog box I could pop, but it seems like I would still have the same problem. I'm open to ideas.

Any thoughts? Thanks in advance for your help.

Upvotes: 2

Views: 10655

Answers (2)

Phill Pafford
Phill Pafford

Reputation: 85318

jQM Offer some experimental options:

I think you might look into:

Upvotes: 0

dSquared
dSquared

Reputation: 9825

Take a look at iScroll 4; works on mobile + desktop and doesn't conflict with JQM.

Has the added bonus of having the feel of a mobile browser scroll.

Upvotes: 3

Related Questions