1

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

Gajotres
  • 57,309
  • 16
  • 102
  • 130
Lambros Petrou
  • 101
  • 1
  • 10

1 Answers1

0

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

Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • I am doing the same thing, that's why I am taking the full screen at the first place. The problem occurs when I am visiting the page for the second time. As you can see the header moved above the visible space of the screen and space added between header and footer. The red color you see is the background color for the div holding the whole page and the light grey is the background color for the div #content. – Lambros Petrou May 10 '13 at 09:05