The Jquery Mobile Dialog Box Does Not Scroll With Dynamic Content


When I dynamically add content to a jQuery mobile dialog, and the new content extends beyond the bottom edge of my phone's screen, I cannot scroll the dialog down to see the new content. However, when I rotate my device to force a redraw of whatever's on the screen, scrolling down works fine.

I tried .page() and .trigger('create') on the dialog element and the element inside the dialog to which the new content is appended - doesn't fix the problem.

How can I update my dialog so scrolling works across all content that has been added to it?

I'm using Jquery mobile 1.2.0, Phonegap 2.2.0, Android 4.0.


It isn't the redraw that makes scrolling start working when you rotate the screen. jQuery mobile has a window resize event that sets the page size in pixels, which sometimes leads to size changes at the wrong time. In most cases you can override that with an !important rule in the css.

If you don't want to dig into jQuery mobile internals, an easier option may be to put a fixed size container inside the dialog and set overflow:auto on that so that the dialog itself doesn't need to scroll.