Phonegap Issue: Keyboard scatters the UI on exit

By November 5, 2013 PhoneGap No Comments

Using PhoneGap with Jquery for an app that I was developing, I ran into an issue with a requirement which required custom position of header, footer and content containers.

 

Using the CSS below, I was able to set the custom positions.
.ui-header {
position : fixed;
top : 0px;
left : 0;
width : 100%;
height : 50px;
}

/* specify content-height*/
.ui-content {
position : fixed;
height: 80%;
top : 50px;
right : 0;
bottom : 50px;
left : 0;
}

/* position footer at the bottom */
.ui-footer {
position : fixed;
bottom : 0px;
left : 0;
width : 100%;
height : 50px;
}

The CSS above does the job perfectly unless you add an input element on the page. When the input element gains focus, the keyboard (or a picker) is shown and the user is able to enter (or select) values. However, when the user finishes his input and is looking to close the keyboard overlay, he has two choices: click on the done button to hide the keyboard; or click on an empty area of the screen to close it. It is in the second case, that the UI scatters upon keyboard hide. Actually, the ui-content container does not get resized correctly on hiding the keyboard via this method. A screenshot of the original layout before UI scattering follows:

 

PhoneGap Issue with Keyboard

Phonegap issue

The resulting scattered UI is demonstrated below:

Phonegap issue fix

Solution

The solution to this problem is setting and resetting the position attribute of the relevant containers, and finally triggering a reset scroll that forces the window to redraw and correctly position all page elements. Here is the actual code that did the job for me:
$(‘input, textarea, select’)
.on(‘focus’, function (e) {
$(‘header, footer’).css(‘position’, ‘absolute’);
})
.on(‘blur’, function (e) {

$(‘header, footer’).css(‘position’, ‘fixed’);
setTimeout( function() {
window.scrollTo( $.mobile.window.scrollLeft(), $.mobile.window.scrollTop() );
}, 20 );
});
});

Copying the above code on all screens carrying an input field solves the main issue. There is, however, one corner case that is not covered. When the user clicks directly on a navigating button instead of clicking on an empty screen area, the UI scatters again. This is resolved with the help of a timeout that gives the page time to redisplay before any navigation starts. Use of the following construct (in addition to the above code) is recommended to solve this issue:

3

Compile and run the app and it should work fine.