JQuery Mobile Windows phone 8 fixed footer

Question

I have a phonegap windows phone 8 app with jquery mobile for styling. I am using the fixed footer for navigation. The footer however floats a few pixels above from the bottom of the phone.

Ive completed the android/Ios version of the application. Im using Adobe Phonegap build to build my application. Android/IOS version is working perfectly. But now im trying to test the Windows Phone 8 version of the app and also i've tested in phone browsers as well its working perfectly in windows 8 phone,ios and android. but i build windows phone app (app.xap) and installed in windows phone and footer is not positioned as expected there is gap above from the bottom.

Please help me out. Any kinda help would be deeply appreciated. Thanks =)

<div data-role="page" data-theme="a" id="page_Login">
        <div data-role="header" data-theme="a" class="okn_applicationTitleLogo">

            <img src="Content/mobile/themes/default/images/logo.png" />
        </div>

        <div data-role="content" data-theme="a" id="loginpage" >
            <div class="okn_contentContainer">
                Login
            <div data-role="fieldcontain" class="ui-hide-label">
                <label for="txtLogin">Username</label>
                <input type="email" name="txtLogin" id="txtLogin" data-bind="value: Username" placeholder="Username" />
            </div>
                <div data-role="fieldcontain" class="ui-hide-label">
                    <label for="txtPassword">Password</label>
                    <input type="password" name="txtPassword" id="txtPassword" data-bind="value: Password" placeholder="Password" />
                </div>
                <div data-role="fieldcontain">
                    <label>
                        <input type="checkbox" name="chkRememberLogin" data-bind="checked: RememberMe " />
                        Remember me</label>
                </div>



        </div>
        <div data-role="footer" data-id="footer_Main" id="firstFooter"    data-theme="a"  >
            <h4>&copy; <span class="footer_copyrightYear">2000</span>  <span class="footer_version"></span></h4>
        </div>

   </div>
    </div>

For what it is worth, I am experiencing this same thing. I am using jQuery Mobile 1.3.2 with jQuery 2.0.3. Phonegap version is 3.1.0-0.15.0. — Matt Ray

batanasov batanasov · Accepted Answer · 2014-03-11T11:20:16

change footer div like this:

 <div data-role="footer" data-position="fixed" style="position: absolute">

Or you can add position absolute directly in your jquery mobile CSS if you prefer.

JQuery Mobile Windows phone 8 fixed footer

1 Answers