Phonegap breaks jQuery Mobile pages when reloaded - visiting the same page again

Question

I have been working on a project using PhoneGap and jQuery Mobile. My setup uses multiple pages inside a single html file.

I am facing a problem and I haven't found anything similar anywhere:

When I revisit a page, which means I visited it, then navigated to another page, and now returned to the first page, there is some padding between the header and the content, and also between the footer and the content of the page.

As screenshots show below:

https://i.stack.imgur.com/fk2ZK.png

Below you can see the padding added, red background, when returned to the page above afterwards (this happens with every page)

https://i.stack.imgur.com/5lk8Y.png

The code is very large to post here so if anyone has a suggestion please tell me how to fix this or where to look for the problem.

It should be noted that the problem exists only if the app runs on Android tablets, and not when viewed through the browser on my laptop.

Thank you

Answer 1

You can force correct content height with this function:

function getRealContentHeight() {
    var header = $.mobile.activePage.find("div[data-role='header']:visible");
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
        content_height -= (content.outerHeight() - content.height());
    } 
    return content_height;
}

It must be activated during the pageshow event because only at that point page height is correct:

$(document).on('pageshow', '#index', function(){       
    $.mobile.activePage.find('.ui-content').height(getRealContentHeight());
});

Working example: http://jsfiddle.net/Gajotres/nVs9J/

If you want to find out more about this function read my other article: https://stackoverflow.com/a/14550417/1848600