Jquerymobile footer navigation bar not getting fixed in 2.x version of android
Hi All,
I am facing a problem with footer navigation bar. It is not getting fixed at the bottom of the page when I scroll in 2.x versions of android. The footer navigation bar is getting fixed in 3.x and 4.x versions of android. As per jqueryMobile 1.1 guidelines, the fixed footer issue should be fixed in 2.2 and above versions of android. But its not getting fixed.
I also tried using polyfill plugin. Still no luck
The html code is as below:
- <div data-role="footer" data-theme="a" data-id="myFooter" data-position="fixed">
- <div data-role="navbar">
- <ul><li >
- <a href="#" id="homeTab" data-role="icon"><div class="home_icon_div_blue"></div></a></li>
- <li><a id="promoTab" data-role="icon"></div></a></li>
- <li><a id="chatClient" data-role="icon"></a></li>
- <li style="position: relative;"><a id="notificationsTab" data-role="icon"></a></li>
- </ul></div></div>
The javascript and css files that I have included are:
- <head>
- <link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
- <link rel="stylesheet" href="css/jquery.mobile.fixedToolbar.polyfill.css">
- <!-- --------------------------- Android cordova file -------------------------------------------------->
- <script type="text/javascript" src="js/jquery/cordova-1.7.0.js"></script>
- <script type="text/javascript" src="js/jquery/jquery-1.7.1.min.js"></script>
- <script type="text/javascript" src="js/jquery/jquery.mobile-1.1.1.min.js"></script>
- <script type="text/javascript" src="js/jquery/jquery.mobile.fixedToolbar.polyfill.js"> </script>
- <script type="text/javascript" src="js/jquery/jquery.ui.position.js"></script>
- </head>
Please help in resolving this issue. Please refer the screen shot to see the issue! The navigation bar is sitting fine at the bottom of the page in android 3.x and 4.x versions but not in 2.3 and 2.x versions.
Regards,
kumarjee Alluri