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
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 attachment (You can see the black footer, even the footer text is not clearly visible)
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..