CODEWITHSUNDEEP
androidcordova
Luís Lopes
Luís Lopes

Reputation: 453

Android 2.3 + Phonegap fixed positioning is not working

On my Phonegap app i'm trying to make out a fixed footer and header, that actually in Android 4.0 works great. But on Android 2.3 even if it looks okay, when I start to scroll the header and footer doesen't stay fixed at all, going along with the scrolling.

The relevant code follows below:

HTML:

<div class="container-fluid no-padding">
<div id="header">

</div>  
<div class="wrapper">
    <div id="main-content"></div>
    <div id="push"></div>
</div>
<div id="footer" class="main-footer">

</div>

CSS:

html,body,.container-fluid {
    height: 100%;
    font-family: Helvetica !important;
}

#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: -20px; /* the bottom margin is the negative value of the footer's height */
    overflow: scroll;
}

#footer, #push {
    height: 20px; /* .push must be the same height as .footer */
    width: 100%;
}

#footer {
    position: fixed;
    z-index: 10; /* Defect #9 */
    margin: 0;
    bottom:0px;
}

#header {
    position: fixed;
    z-index: 5;
    height: 40px;
    background-color: #FFFFFF;
    width: 100%;
    top: 0px !important;
}

#main-content {
    margin-top: 45px;
}

.main-footer {
    background-color: #cf2129;
    color: #FFFFFF;
}

If it is relevant, I'm not using jQuery Mobile (that most part of the awnsers I found relate to), but Twitter Bootstrap instead.

Any guidance is welcome

Upvotes: 2

Views: 6925

Answers (3)

Ben Frain
Ben Frain

Reputation: 2568

I seem to have found a simple fix for Android 2.2 and 2.3. Just add:

-webkit-backface-visibility: hidden; to the element you are using fixed positioning on.

More details about that here: http://benfrain.com/easy-css-fix-fixed-positioning-android-2-2-2-3/

Not tested it exhaustively so let me know if it doesn't work for you. Live URL to test here: http://codepen.io/benfrain/full/wckpb

Upvotes: 2

Lu&#237;s Lopes
Lu&#237;s Lopes

Reputation: 453

I found it out,

Just add "user-scalable=0" to the meta viewport tag.

Web designers are used to fixing elements to the window using CSS’s position: fixed, however, in the land of mobile browsers, support for fixed positioning is far less universal and is way more quirky.

Source: http://bradfrostweb.com/blog/mobile/fixed-position/

It tells everything you need to know about fixed elements and mobile browsers :)

Upvotes: 10

mpatel
mpatel

Reputation: 486

This are kind of issues i am having when i was developing a PhoneGap Application.Sometimes its phonegap version is not compitable with the android version.So its create issues but i have faced similar kind of issue in past.What i have done instead of giving id to div use class. like

<div class="header">
</div>

and for css use class instead of id.

.header
{
   position:fixed;
}

I know it seems very odd,funny answer.Not worthing at all. but this work for me.That's why i am sharing with you.

Upvotes: 0

Related Questions