Height content problem in mobile page

[cristhiancamilo511]

In some cases, when we are developing mobile pages you maybe find that the content height of the main div is not full sized on the screen.

It is a jquery issue (if I can called like that) that is present in primefaces mobile. So, in order to resolve this you have to reset the content height by writing some javascript or jquery code:

$(document).ready(function(){
$(".ui-content").height(getRealContentHeight());
});
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[role='main']: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;
}

This code gets the footer, header and content heights and resize the main div to fill the page.
Hope it helps to someone and sorry for my poor english. I'm not native and try to improving it every day

[kukeltje]

Thanks, compared to some others, your English is fine.

I created something like this to, but much simpler... Mine lead to some jumping ui things e.g. when loading a new full page or have a multi page transition... Does yours to?