CODEWITHSUNDEEP
jquery-mobile
Boyds
Boyds

Reputation: 441

jQuery mobile footer not always at bottom of screen

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>

Upvotes: 0

Views: 3868

Answers (2)

Ahsan Ali
Ahsan Ali

Reputation: 31

I was facing the similar problem, when the keyboard popup, the footer moves up. So I add the inline style with my footer. That worked for me. 

<div data-role="footer" data-position="fixed" style="position:absolute">

--> " style = "position:absolute" "

that small part I add to my footer tag... and that worked perfectly. I hope that work for you.

Upvotes: 1

daniel.auener
daniel.auener

Reputation: 1294

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.

Upvotes: 0

Related Questions