CODEWITHSUNDEEP
jquery-mobile
robert
robert

Reputation: 8717

jquery mobile fixed footer scrolls with the page

I'm trying to implement the fixed footer on my site.

My problem is, when I scroll the page, the footer is overlapping with the content. When scrolling is finished, it falls back to the bottom. Is this the standard behavior?

I checked this link. It works on desktop browser. ie. the footer remains fixed on scrolling. But on mobile(android) it scrolls with the page. Can I make it really fixed?

EDIT: HTML added

<div data-role="footer" data-iconpos="left"  data-id="jefooter" data-theme="b" data-position="fixed" data-tap-toggle="false">
    <div data-role="navbar">
        <ul>
            <li>
                <a href="/welcome" data-icon="jehome" data-iconpos="notext" data-direction="reverse" data-ajax="false">Home</a>
            </li>
            <li>
                <a href="/mobile/users/settings" id="user_auth" data-icon="jesettings" data-iconpos="notext" data-transition="fade" data-ajax="false">My Settings</a>
            </li>
            <li>
                <a href="/mobile/help" data-icon="jehelp" data-iconpos="notext" data-transition="fade" data-ajax="false">Help</a>
            </li>
        </ul>
    </div>
</div>

You can see the page at m.qa.hungryzone.com

EDIT 2:

Android version is 2.3.5

Upvotes: 3

Views: 7014

Answers (3)

ElieH
ElieH

Reputation: 105

I fixed it by replacing 

<meta name="viewport" content="width=device-width, initial-scale=1" />

with

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

in the header of the html

and by adding a new class to the footers along with data-role='footer'

.footer {
    position: fixed;
    z-index: 10;
    bottom: 0;
    width: 100%;
}

Upvotes: 8

Jeemusu
Jeemusu

Reputation: 10533

Unfortunately this appears to be a bug that is present with jQuery Mobile on devices running Android 2.3.5 - 2.3.6 .

The guys at jQuery Mobile are pointing the finger at Google:

...this does seem to be a bit of blip -- a regression in Android that Google seems to be fixing in later versions but as all Android issues go, it's not clear or consistent.

The open bug report and more details can be found here: https://github.com/jquery/jquery-mobile/issues/4281

Upvotes: 3

Joel Friedlaender
Joel Friedlaender

Reputation: 2191

Are you using the latest version of jQuery Mobile? It's still not perfect, but is better than older versions. This is the latest (1.2.0 alpha)...

http://jquerymobile.com/blog/2012/08/01/announcing-jquery-mobile-1-2-0-alpha/#download

EDIT

You could stop using the jQuery Mobile fixed footer and add this class instead to your footer:

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

Upvotes: 1

Related Questions