jQueryMobile-Phonegap : Footer alignment issue in Windows8 Landscape mode

Question

I have been working on a jQueryMobile App wrapped in phonegap with fixed footer.

In windows8 phones, while changing the orientation to landscape mode, the fixed footer is not aligned correctly in landscape mode only. The footer seems to have a bottom padding like behavior in landscape mode. In Portrait mode, it is aligned perfectly.

I am using jquery.mobile-1.3.2, and Phonegap 2.7.0.

I have been trying the fixes mentioned in the below URL's, but did not help:

https://forum.jquery.com/topic/jquery-mobile-fixed-footer-not-at-the-bottom-on-windows-phone-7-and-8

stackoverflow.com/questions/16602585/jquery-mobile-position-fixed-in-windows-phone-8-and-viewport-height

gilesey.wordpress.com/2013/08/15/jquerymobilephonegap-hintshacks-for-windows-phone-8-0iosandroid/

Also tried some of the JS, jQM and CSS tricks, but no change affected for the footer.

A screen-shot of the page in Landscape mode is shown in the below link (You can see the black footer, even the footer text is not clearly visible):

http://goo.gl/8RICNG

For more clarity, a part of the header section is pasted below:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />

And my App footer code is:

<div data-role="footer" data-position="fixed" data-tap-toggle="false" data-hide-during-focus="" class="footer-cls">

    <div align="center" class="footer-txt"><script>document.write(footerText);</script></div>
</div>

Can any one please help me with a perfect work around as I am stuck with this issue?

Thanks in advance..

Answer 1

In Mainpage.xaml try changing the property

shell:SystemTray.IsVisible="True"

to

shell:SystemTray.IsVisible="False"

This will render the app in fullscreen mode and will reset your CSS to the entire page.This might fix your issue