Phonegap JQM fixed position Header / footer moves after disabling iOS keyboard

Question

I am trying to use JQM in a Phonegap project to create a fixed header and footer in an iOS app. I have a page that uses legible DIVs and it has text input inside a DIV. Everything is fine with the header and footer until I push the DIV apart and type something into the text box. As soon as I dismiss the iOS keyboard, the title has moved up and overlaid with the “iPhone” information panel, and the footer also slides across the page and is no longer fixed on the bottom. If I parse another collapsible DIV after this, the footer will return to the correct place, but the header will remain superimposed at the top of the screen. Any ideas what is going on?

JQM Page Code:

<div data-role="page" id="wizard_3"> <div data-role="header" class="header" data-id="cls_header"> <h1> <label>Testing&reg;</label> testProgram&reg;</h1> </div> <div data-role="content"> <div data-role="collapsible-set" id="ability_set"> <div data-role="collapsible" data-collapsed="true" id="abilQuestion1" class="collapsedAbilityQuestion"> <h3 id="abilQuestion1Header">XXXXXXX </h3> <p id="abilQuestion1Text">XXXXXXX</p> <div data-role="fieldcontain" data-inline="true" class="ratingControls"> <fieldset data-role="controlgroup"> <input type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/> <input type="text" id="ability1" class="assessNum" value="0"/> <input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/> </fieldset> </div> </div> <div data-role="collapsible" data-collapsed="true" id="abilQuestion2" class="collapsedAbilityQuestion"> <h3 id="abilQuestion2Header">XXXXXXX</h3> <p id="abilQuestion2Text">XXXXXXX</p> <div data-role="fieldcontain" data-inline="true" class="ratingControls"> <fieldset data-role="controlgroup"> <input type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/> <input type="text" id="ability2" class="assessNum" value="0"/> <input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/> </fieldset> </div> </div> <div data-role="collapsible" data-collapsed="true" id="abilQuestion3" class="collapsedAbilityQuestion"> <h3 id="abilQuestion3Header">XXXXXXX</h3> <p id="abilQuestion3Text">XXXXXXX</p> <div data-role="fieldcontain" data-inline="true" class="ratingControls"> <fieldset data-role="controlgroup"> <input type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/> <input type="text" id="ability3" class="assessNum" value="0"/> <input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/> </fieldset> </div> </div> <div data-role="collapsible" data-collapsed="true" id="abilQuestion4" class="collapsedAbilityQuestion"> <h3 id="abilQuestion4Header">XXXXXXX</h3> <p id="abilQuestion4Textr">XXXXXXX</p> <div data-role="fieldcontain" data-inline="true" class="ratingControls"> <fieldset data-role="controlgroup"> <input type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/> <input type="text" id="ability4" class="assessNum" value="0"/> <input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/> </fieldset> </div> </div> <div data-role="collapsible" data-collapsed="true" id="abilQuestion5" class="collapsedAbilityQuestion"> <h3 id="abilQuestion5Header">XXXXXXX</h3> <p id="abilQuestion5Text">XXXXXXX</p> <div data-role="fieldcontain" data-inline="true" class="ratingControls"> <fieldset data-role="controlgroup"> <input type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/> <input type="text" id="ability5" class="assessNum" value="0"/> <input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/> </fieldset> </div> </div> <div data-role="collapsible" data-collapsed="true" id="abilQuestionn6" class="collapsedAbilityQuestion"> <h3 id="abilQuestion6Header">XXXXXXXX</h3> <p id="abilQuestion6Text">XXXXXXXX</p> <div data-role="fieldcontain" data-inline="true" class="ratingControls"> <fieldset data-role="controlgroup"> <input type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/> <input type="text" id="ability6" class="assessNum" value="0"/> <input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/> </fieldset> </div> </div> </div> </div> <div id="footer" data-role="footer" data-position="fixed" class="ui-bar footer" data-theme="b"> <span class="leftButton"> <input type="button" class="leftButton" data-theme="b" data-icon="arrow-l" value="Back" onClick="goBack(2)"/> </span> <span class="rightButton"> <input type="button" class="rightButton" id="wizardNextButton_3" data-theme="b" data-icon="arrow-r" value="Coninue to Step 3" onClick="javascript:wizardDecision(3, true); return false"/> </span> </div> </div> 

Answer 1

I had a similar problem with which I fixed:

 /* iOS keyboard popup somehow leaves page scrolled, unscroll it */ $.mobile.silentScroll(0); 

I found a solution at http://forum.jquery.com/topic/phonegap-jqm-fixed-position-header-footer-moves-after-dismissing-ios-keyboard

Answer 2

Take a look at this solution.

This is reported as a jQM error, but it is still in jQM 1.3.2.

Try this solution, which works for me, taken from the stream indicated below.

 // Workaround for buggy header/footer fixed position when virtual keyboard is on/off $('input, textarea') .on('focus', function (e) { $('header, footer').css('position', 'absolute'); }) .on('blur', function (e) { $('header, footer').css('position', 'fixed'); //force page redraw to fix incorrectly positioned fixed elements setTimeout( function() { window.scrollTo( $.mobile.window.scrollLeft(), $.mobile.window.scrollTop() ); }, 20 ); }); 

Other solutions are posted here. This is an interesting topic: https://github.com/jquery/jquery-mobile/issues/5532

Answer 3

It is a difficult problem to get "right." You can try to hide the footer at the focus of the input element and show blur, but this is not always reliable on iOS. Every so often (once every ten, say, on my iPhone 4S), the focal event does not seem to fire (or maybe there is a race condition), and the footer is not hidden.

After much trial and error, I came up with this interesting solution:

 <head> ...various JS and CSS imports... <script type="text/javascript"> document.write( '<style>#footer{visibility:hidden}@media(min-height:' + ($( window ).height() - 10) + 'px){#footer{visibility:visible}}</style>' ); </script> </head> 

Essentially: use JavaScript to determine the height of the window of the device, and then dynamically create a multimedia CSS request to hide the footer when the window height is reduced by 10 pixels. Since opening the keyboard changes the size of the browser screen, this is never interrupted in iOS. Since it uses the CSS engine, not JavaScript, it is much faster and smoother!

Note. I found that "visibility: hidden" is less buggy than "display: none" or "position: static", but your mileage may vary.

Answer 4

The best solution I found for this problem is to use this plugin: (blurring input doesn't work so well)

ionic-plugins-keyboard

  bindViewEvents: function () { var context = this; window.addEventListener('native.showkeyboard', context.keyboardShowHandler); window.addEventListener('native.hidekeyboard', context.keyboardHideHandler); }, keyboardHideHandler: function (e) { var context = this; $(".ui-footer[data-role='footer']").show(); }, keyboardShowHandler: function (e) { var context = this; $(".ui-footer[data-role='footer']").hide(); } 

Answer 5

I just check it, it works.

  $(document).on('focus','input', function() { setTimeout(function() { $('#footer1').css('position', 'absolute'); $('#header1').css('position', 'absolute'); }, 0); }); $(document).on('blur','input', function() { setTimeout(function() { $('#footer1').css('position', 'fixed'); $('#header1').css('position', 'fixed'); }, 800); });