I’ve got a jQuery mobile app wrapped in PhoneGap. I’m trying to use a fixed footer and header and having some trouble with the footer.
If I have content with X length and then after a click the content is smaller – the footer would move up and not stick to the bottom of the screen. If I click on the screen it will go back to its place.
Any ideas why this happens?
My footer code is:
<div data-role="footer" data-position="fixed" data-id="footer_main">
<div data-role="navbar">
<ul class="navbar">
<li><a href="#home" data-icon="home" class="search">Home</a></li>
<li><a href="#bycity" data-icon="search" class="search2">City</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
This issue would happen on Android and iPhone in pretty much the same way (iPhone maybe even more).
BTW – I’m using jQuery mobile “jquery.mobile-1.0b2″ and PhoneGap 1.0