JQuery-mobile, Phonegap, iOS, fixed header transitions after entering the input form

Question

I am using Phonegap with jQuery-mobile, Phonegap on iOS. I am facing this problem when moving the header in the middle when exiting the form.

I already set data-hide-in-focus = "true" to a fixed header and footer. This problem is killing me.

Answer 1

If we have only one header line, we can only follow the code for the main header.

$(document).on('focus', 'select, input, textarea', function () { $('#main-headerbar').css({'position': 'absolute', 'top': '0px' }); }); $(document).on('blur', 'select, input, textarea', function () { $('#main-headerbar').css({ 'position': 'fixed' }); }); 

If we have two heading lines, and the second heading will be displayed under the main heading line (if the height of the main heading bar is 47 pixels, then set the top style for the second heading, top: 47px).

 $(document).on('focus', 'select, input, textarea', function () { $('#main-headerbar').css({'position': 'absolute', 'top': '0px' }); $('#Second-headerbar').css({ 'position': 'absolute', 'top' : '0px' }); }); $(document).on('blur', 'select, input, textarea', function () { $('#main-headerbar').css({ 'position': 'fixed' }); $('#Second-headerbar').css({ 'position': 'fixed', 'top': '47px' }); }); 

OR follow iOS fix for fixed entry position elements

Answer 2

I had a similar problem with which I used 1.0.1, and the main problem occurred when moving the headers to an older version of Android version 2.3 and even on a Google Nexus phone. I searched the Internet more and more than after some R&D, I realized that this was the main css error. Below is what I did to solve it.

• Enter a header class ".header" on each page
• Create a css class with the following code
• .header{ border: 0px; position: fixed; width: 100%; top: 0px; left: 0px; z-index: 21; }

In addition, if you encounter problems when the title is reset after changing the page, add this code $.mobile.silentScroll(0); in $("#yournextpageid").live("pageshow", function() { $.mobile.silentScroll(0); }

What makes jQuery data-position="fixed" , it dynamically adds the top position to its header and has overhead and is very sticky on some devices. In addition, it starts on some devices when the keyboard is opened. Adding CSS will help solve your problems.

Answer 3

in Config.xml change the line to false, it will solve your problem.