CODEWITHSUNDEEP
javascriptjquery-mobilecordova
Prafull
Prafull

Reputation: 591

Phonegap fixed header and footer

We are developing Phonegap mobile app having fixed header and footer. But if any form elements focus the whole page become scrollable and header and footer losses its position fixed. In Android it is working fine but in iOS we face this problems.

Update :-

Viewport Meta 

<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 Header

<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>

Upvotes: 4

Views: 1718

Answers (1)

anotherBug
anotherBug

Reputation: 117

It is a bug. I had the same and its quite annoying. Add this lines in tag head:

<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 must 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" />

Upvotes: 2

Related Questions