2

I'm using the jQuery Mobile Framework to develop a website for phones, and there are some images on the site that I want to open up in a larger format in the Dialog control.

I have a page setup that handles loading the image where the image is in a div with overflow=auto. It works on a desktop browser (Chrome), where if I shrink the window down, the dialog has scroll bars internally for the image. It doesn't work however on my phone's browser (Android, so Chrome browser). The div doesn't want to scroll. Is there any way I can circumvent this, aside from shrinking the image down?

Here's the code for the image page:

<div data-role="dialog">
    <div data-role="header" data-theme="d" data-position="inline">
        <h1><%= ViewData["ImageTitle"] %></h1>
    </div>
    <div data-role="content" data-theme="c">
        <div style="overflow:auto;">
            <img alt="<%= ViewData["ImageAlt"] %>" 
                 src="<%= ViewData["ImageUrl"] %>" />
        </div>
    </div>
</div>
Andrew Burgess
  • 5,300
  • 5
  • 30
  • 37
  • Not a solution but Reading through [this post](http://code.google.com/p/android/issues/detail?id=2118) it looks like it was a bug and it's been fixed since Gingerbread but ya, you definitely need a workaround. – Bala R Apr 22 '11 at 20:59

2 Answers2

0

How to get the scroll bar with CSS overflow on iOS

Community
  • 1
  • 1
c-smile
  • 26,734
  • 7
  • 59
  • 86
0

Sounds like you want a "lightbox" type of plugin. Check this out: best jquery-based lightbox / popup dialogbox? or http://www.designyourway.net/blog/resources/30-efficient-jquery-lightbox-plugins/

Pretty sure these plugins should work just fine in a mobile environment.

Community
  • 1
  • 1
Aaron Barker
  • 706
  • 7
  • 14