Question

I’m using the new fixed headers available in jQM 1.1-rc1

The page looks like this

<div data-theme="a" data-role="page" data-title="Home" id="home_page" >
    <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
        <h1>Home</h1>   
    </div>
    <div data-role="content" id="categories_content">
        <ul data-role="listview" data-theme="a" id="categories_list">
            <li>something</li>
            <li>something else</li>
        </ul>
    </div> 
    <div data-role="footer" data-position="fixed" data-tap-toggle="false"><h1>Home</h1></div>
</div>

My problem is that the page scrolls when there isn’t any need for it to scroll. The list is short and doesn’t go below the footer.

Has anyone encountered this problem before, and if so how did you overcome it?

Here is a jsfiddle showing the issue: jsFiddle

Thanks in advance.

Answer 1

This appears to be a bug with jQuery Mobile. Padding is added to the .ui-page element(s) to account for the header and footer, but the height is not correctly updated on page-load or when the browser re-sizes. You can fix this with a bit of a hack:

//bind to the resize event for the window element
​$(window)​.on('resize', function () {

    //set a timeout to allow jQuery Mobile to update the element before we correct the value
    setTimeout(function () {

        //change the height of the current page to get rid of the scroll bar
        $.mobile.activePage.css('minHeight', '-=85px');
    }, 50);

//trigger a resize event onload
}).trigger('resize')​;​​

Update

I started a bug report on Github for jQuery Mobile to resolve this issue: https://github.com/jquery/jquery-mobile/issues/3825