iScrollview not properly calculating content div height

911 views Asked by At

I'm working with jQuery Mobile and iScroll with the iScrollview widget plug-in. My intent is to set the header and footer to fixed positions and for iScroll to handle scrolling all content between the two.

So I've got something like this:

<div data-role="header" data-position="fixed" data-fullscreen="false" data-id="hdr" data-theme="c" data-visible-on-page-show="true" data-tap-toggle="false" data-transition="none">
...
</div>

<div id="content" data-role="content" data-theme="c" data-iscroll class="scroll-wrapper">
...
</div>

<div data-role="footer" data-position="fixed" data-fullscreen="false" data-id="ftr" data-visible-on-page-show="true" data-tap-toggle="false" data-transition="none" data-theme="c" class="ui-bar">
...
</div>

My problem is that when the page initially displays, content does not extend all the way to the footer. I can see in Firebug that the data-iscroll div height is getting set to 759px on my desktop browser. It should be 865px. The difference being precisely the 53px header and 53px footer. In other words, iScroll is factoring in the height of the header and footer even though they are outside my iscroll-data div.

When I change orientation, the iscroll div is correctly resizing to the full height.

If I add this on pageinit, the first page displays properly but none of the subsequent pages display properly.

$( document ).on( 'pageinit', ['.cover-story-page', '.notes-page'], function() {
    $(".scroll-wrapper").data("mobileIscrollview").resizeWrapper();
    $(".scroll-wrapper").data("mobileIscrollview").refresh();
});

I've tried pagebeforecreate, pagecreate, pageinit, pagebeforeshow, pagebeforehide, pageshow pagehide, pagebeforechange, pagechange and pagechangefailed. Some error out and the others won't resize and refresh the scroller.

My question is: If the scrolling region corrects itself on a change in orientation, how can I force it to correct itself each time a page is displayed?

0

There are 0 answers