Using the overflow style attribute on the div tag is pretty common. I used this on AroundCloud.Com to create a styled “listbox”. I was surprised to learn the iPhone browser handles this in the most bazaar way.
I guess the first part of the problem is that if your user’s are browsing the site the iPhone OS2 or lower the overflow attribute is not supported. If your user’s have iPhone OS3 or greater then you are in luck. It is supported as a two finger scroll gesture. Although supported, there no visual cue the user is has a scrollable area. As the developer of the site I assume I could add arrows, signs, or something but this seems like an odd gesture to provide instructions for.
I guess this leaves the question of why does it act this way, what does it look like, and is there a solution?
- Before iPhone OS 3 was released the div overflow tag didn’t work at all and simply displayed the content that was visible without the scroll.
- iPhone OS 3+ Apple implemented a two finger scroll when a div with an overflow was found.
When reading the iPhone OS 3 has support for div overflows I was excited, I now didn’t need to re-write a section of my site for iPhone users. But, what the heck is a two finger scroll? Since this was a new one for me I figured I’d create an example.
The Div Code:
How Does It Look?
|What it looks like in your desktop browser?|
What it looks like on your iPhone?
There really isn’t a, one size fits all solution. Depending on the design of your site you might be able to use a HTML Select Tag, a list, or a custom listbox style control. For my project, I choice to implement an iPhone only experience using the IUI project’s framework to provide a native tableview look and feel.
For me this was the right decision since provide a view based on the user agent is fairly straight forward with ASP.Net MVC. You can read more about that here.
This is just one example of how the mobile web is impacting pretty common development practice. The explosion of the mobile web will force us to look even designs we think are straight forward in new ways.