Question

I’m working on a mobile phone app using jQuery mobile and phonegap. I’m using fixed footers and headers. Sometimes, after the keyboard has popped up, a space will appear between the footer bar and the keyboard. This space is the same as the background color, so I assume the footer is just shifting up for some reason. The behavior appears to be inconsistent, as it doesn’t happen on all pages.

Here’s a snippet of code…this code is the same for all pages but the gap is only on one page. The only difference between pages is the number of fields I have on the pages.

<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
        <a href="#accident_menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left"
           style="margin-left: 10px; margin-top: 5px">Done</a>
        <a href="index.html" rel="external" data-icon="home" data-direction="reverse" data-iconpos="notext"
           style="float: right; margin-right: 10px; margin-top: 5px"></a>
</div>

Answer 1

You should consider to change to Jquery mobile 1.1.0 and their real fixed toolbars. Read the announcement. Its supported by most of the devices in use and the most clean solution:

The coolest part about this approach is that, unlike JS-based solutions that impose the unnatural scrolling physics across all platforms, our scrolling feels 100% native because it is. This means that scrolling feels right everywhere and works with touch, mousewheel and keyboard user input.