Forum | Appery.io

pI've noticed a problem I had seen many people talk about:/ppWhen the mobilecontainer region of a screen is too large to display, if you scroll it up and down, the header and footer scroll with it./ppNone of the fixes specified here worked for me: the "fixed" attribute is ignored for these containers, generally speaking, even if you use jquery mobile 'data-position: fixed', or if the footer/header are "position:fixed" or "position:absolute" or if you have "ui-footer-fixed" or "ui-header-fixed" classes. Tried them all, none worked, header and footer scrolled uncontrollably./ppAnnoying./ppI found that if you globally set the following attributes at start-up, the header and footer are locked into fixed positions without any problem on all pages and scrolling works perfectly, leaving the headers and footers intact./p code$("[data-role=content]").css("height",0);/code
code$("[data-role=content]").css("min-height",window.innerHeight);/code

pLikewise, if you hate the flicker of a page resizing when you navigate to it, or back, because the predefined screen size was different than the display size you are testing on, this will also lock all the app pages to the device size in advance, regardless of the "predefined screen size" when you set the app up./ppI can't explain why it works, but it does for me. /p

Hi Joseph,

Thanks for this update.

Regards.

Joseph,

How did you implement these attributes at start-up? Does this mean that the headers and footers will always remain in place, even if you scroll and tap the screen?

Thanks,
Mike

Yes. You have to put in in javascript in the very first page excuted.