I have a major issue with apache cordova, this is an IOS-specific issue, I am using Jquery-mobile. The issue appears whenever one does a search on a listview control then my fixed position header, footer and search input moves down.. here is the markup of my page... <!DOCTYPE HTML> <html> <head> <title>Contacts</title> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no" /> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" /> <link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" /> <link href="css/jquery.mobile.icons.min.css" rel="stylesheet" /> <link href="css/jquery-ui.min.css" rel="stylesheet" /> </head> <body> <style> #my-wrapper { padding-top: 81px; background-color: rgb(250, 246, 246); } #my-wrapper form { position: fixed; left: 2%; right :2%; top: 35px; width: 96%; z-index: 2; background-color: rgb(250, 246, 246); border-color : rgb(120, 120, 120); text-shadow:unset; box-shadow:unset; } #ContactHeader { position: fixed; top: 0px; width: 100%; z-index: 1; } </style> <div id="employeeListPage" data-role="page" > <div id="ContactHeader" data-role="header" style="height:32px ; "> <a class="ui-btn-left" data-icon="arrow-l" href="#" onclick="window.location.replace('index.html');" style="vertical-align:text-top; height:8px"></a> <h2>Contacts</h2> </div> <div id="my-wrapper" data-role="main"> <ul id="employeeList" data-role="listview" data-inset="true" data-filter="true" data-filter-theme="staticscroll" data-filter-placeholder="Search Contacts/Companies" ></ul> </div> <div data-role="footer" style="text-align:center; width: 100%;height: 25px;position:fixed;bottom: 0px;left: 0px;right: 0px;">My footer</div> <div id="loadmoreajaxloader" style="display:none;"><center><img src="css/images/bw-loader.GIF" /></center></div> </div> <script type="text/javascript" src="cordova.js"></script> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/jquery.mobile-1.4.5.min.js"></script> <script src="js/contactlist.js"></script> </body> </html> I also have an event that fire when a user starts typing in the search bar $(document).on("pagecreate", "#employeeListPage", function () { $("#employeeList").on("filterablebeforefilter", function (e, data) { var URL = window.localStorage.getItem("ContactsForSearch"); URL = URL + '/' + nextNo + '/' + value; $.getJSON(URL, function (info) { if (info.length === 0) { nomoredata = true; //alert('no more data to display'); $('#employeeList').append('<br>'); $('#employeeList').append('<center><h2>No Data <h2> </center>'); } else { $('#employeeList').append('<li style="border-top: 1px solid #0189D0;"><a data-transition="slide" href="employeedetails.html?id=' + id + '&comnum=' + comNum + '&contactNum=' + contactNumber + '"><h2>' + companyName + '</h2> <small>' + name + ' - ' + designation + '</small>' + '</a>' + '</li>'); } }); }); }); please help..
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)