jQuery Mobile and a fixed footer

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

newest questions tagged jquery – Stack Overflow

About Admin