0

I am developing a mobile application using jQuery Mobile and Phonegap. I want to have a fixed footer and want the footer to be hidden when user clicks on a input field like a text field or textarea. I am able to get the footer position to be fixed by using the data-position="fixed" attribute on the footer.

The issue is when I click on a text field to enter data, the footer overlaps on the input field and looks odd. I tried to use the hideDuringFocus but is of no use as it doesn't work on a fixed footer.

Has anyone else faced a similar issue?

John Conde
  • 217,595
  • 99
  • 455
  • 496
Vivek Gajula
  • 21
  • 1
  • 6
  • See http://stackoverflow.com/questions/13097663/jquery-mobile-fixed-footer-is-moving-when-keyboard-appears-in-android/13176372#13176372 – gmh04 Nov 01 '12 at 11:49

1 Answers1

0

I'm not sure this solution is what you're looking for, but you may have a try.

Try to add the option data-tap-toggle="false" to your footer, and keep data-position="fixed".

The solution above allows you to select input texts without having your footer overlapping it.

However, with this solution, your footer won't be hidden but moved completely to the bottom of your page (it would be like a footer without data-position="fixed"), and once the focus on your input is lost, your footer will go back to normal (with a fixed position).

Hope this helps.

Littm
  • 4,923
  • 4
  • 30
  • 38
  • 1
    Thanks for the reply. I've tried the options that you have mentioned, but the footer moves up when the keyboard popups on the screen and this causes the footer to overlap with the input fields. Removing the data-position="fixed" helps but the footer won't stay at the bottom of the page. I tried using CSS to fix the footer position to the bottom of the page, but no luck. – Vivek Gajula Sep 20 '12 at 14:28