Phonegap fixed header and footer

Question

We are developing a mobile application Phonegapwith a fixed header and footer. But if any form elements are concentrated, the whole page becomes scrollable, and the loss of the header and footer are fixed. On Android, it works fine, but on iOS, we run into such problems.

---

Update: -

Viewport Meta strong>

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, height=device-height, width=device-width ,target-densityDpi=device-dpi"/>

Application title

<div data-role="header" id ="Top_content" data-position="fixed" data-tap-toggle="false" data-hide-during-focus=""> 
    <div id="jqm-homeheader" class="jqm-homeheader" align="center"> 
        <img src="images/logo.png" align="center"> 
    </div><!-- Logo closes-->
    <div data-theme="c" data-add-back-btn="true" > 
        <div id="search-box1">
            <form action="" onsubmit="custom_search();"> 
                <input type="search" name="search-product" id="search-product" value="" placeholder="Search" style="width:90%;" data-theme="s" />
            </form> 
        </div> <!-- Search Box--> 
    </div>
</div>

Answer 1

This is mistake. I had the same thing and its pretty annoying. Add these lines to the tag header:

<script>     
$(document).on("mobileinit", function () {
  $.mobile.fixedtoolbar.prototype.options.tapToggle = false;
  $.mobile.fixedtoolbar.prototype.options.hideDuringFocus ="";
});
</script> 

Add them after:

<script type="text/javascript" src="phonegap.js"></script> 

If you have jquery and jquery mobile, it should be like:

** CHANGE SRC **

<script type="text/javascript" src="phonegap.js"></script> 
<script type="text/javascript" src="js/libs/jquery-1.9.1.min.js" ></script>
<script>     
$(document).on("mobileinit", function () {
  $.mobile.fixedtoolbar.prototype.options.tapToggle = false;
  $.mobile.fixedtoolbar.prototype.options.hideDuringFocus ="";
});
</script>
<script type="text/javascript" src="js/libs/jquery.mobile-1.3.2.js" ></script>  
 <!-- css -->
<link rel="stylesheet" href="js/libs/jquery.mobile-1.3.1.min.css" />