Question

I have a jquery mobile page in which I have a textbox. On clicking on the textbox the the virtual keyboard appears on the phone screen.

The problem starts here. If I run the page in android 2.3.3, the footer on my page comes up as the keyboard appears. But this does not happen when i run my page on ICS. I know there is bug in android 2.3.3 related to fixed positioning of header amd footer(github link).

Is this problem beacuse of the same reason?

Please Help !! Thanks !!

Answer 1

1. Make sure to disable zooming in your app by adding this meta – tag to your head:

   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

2. Create your page with a footer as you would normally. Make sure NOT TO ADD data-position="fixed"

3. Instead, add a class “fixedFooter” to the class attribute of the footer: class="fixedFooter"

4. Create the class “fixedFooter” in your CSS(-file):

   .fixedFooter 
   {
      position: fixed !important;
      left: 0px !important;
      right: 0px !important;
      bottom: 0px !important;
      z-index: 999 !important;
   }