CODEWITHSUNDEEP
androidhtmljquery-mobile
Mak
Mak

Reputation: 604

android 2.3.3 fixed footer issue

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 !!

Upvotes: 2

Views: 2297

Answers (3)

fuqi
fuqi

Reputation: 66

  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;
}

Upvotes: 5

trante
trante

Reputation: 34006

If your code works on ICS and doesn't work in Android 2.3.x this is because 2.3.x bug in style="position:fixed;"

In your HTML head change meta to this:

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

This solves Android 2.3.x issues.

More info:
http://benfrain.com/easy-css-fix-fixed-positioning-android-2-2-2-3/
http://bradfrostweb.com/blog/mobile/fixed-position/

Edit:
I don't recommend to change viewport for all devices. It can cause different behaviours like user can't make zoom, pinch etc. One should detect whether visitor uses a Gingerbread device and change viewport if user has Gingerbread. To check Android version you can use this:
Detecting Android Browser (from v. 1 to 2.3 firmware) in PHP

Upvotes: 1

Wladimir
Wladimir

Reputation: 1

remove the "user-scalable=no" from the viewport and all works wel

explained @ http://wil.to/android-positioning/

worked like a charm on 2.2.2

Upvotes: 0

Related Questions