jqGrid - Scrollbar missing on Safari Mobile

Question

For the most part, jqGrid works great under "Safari Mobile" on the iPad and iPod Touch. However, I noticed that on these devices a jqGrid will not display a scrollbar if there are more items in the grid than can be displayed on the page.

You can scroll with two fingers to flip through the content, however since the scrollbar is not displayed there is no indication to the user that more content is available. So they might not even know that they need to scroll. Nevermind the fact that many mobile users will not know you can do the "two finger scroll".

I suppose there are two parts to my question -

• First, does anyone have a work-around to display the scrolll bar?
• If not, can anyone think of a good UI cue to alert a user to the fact that there is more data that they need to "scroll" to?

There is a discussion of this issue on the jqGrid forums under Scrollbar missing on Safari Mobile, but no resolution.

Answer 1

I've encountered this problem with the iPad before, and I bet it's the same case with the iPod Touch. Mobile Safari does not allow inner page divs to have their own scroll bar, even if there is overflow. The worst thing is that even though the CSS on your page may specifically demand that the div show a scroll bar, mobile Safari removes it anyway.

The bigger issue is figuring out a good UI pattern to demonstrate that your div can be scrolled. Maybe it's enough to show that some of the data is cut off? You might also try to look into some solutions for creating a javascript-enabled scroll bar on the page.