cordova - Phonegap Android Application not adjusting pan on keyboardshow -

i'm developing phonegap application version 2.9.0;

the layout tested in desktop browser using rwd bookmarklet(http://responsive.victorcoulon.fr/) , worked fine. however, when tested in mobile devices or emulator, layout broke. after little bit testing, found out problem status bar height. changed application fullscreen, problem solved.

but now, when focus on input field, screen not being adjusted, so, keyboard covers input field!

after looking questions , related problems, found this one, makes sense me, wanted know if there way make adjust pan work fullscreen, don't need adjust components height, calculate different status bar heights based on devices, etc.

codes

form.html

<form id="login-form">     <div class="form-group">        <input type="text" name="login" class="form-control" id="login"                         placeholder="xxxxxxx@example.com">     </div>     <div class="form-group">       <input type="password" name="pass" class="form-control"                         id="password" placeholder="*******">     </div>     <a class="pull-right login-btn" id="btn-login" href="#"><span                     class="image-replacement"></span></a>      <a class="pull-right login-btn" id="btn-cadastro" href="#"><span class="image-replacement"></span></a> </form> 

android manifest.xml

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" android:windowsoftinputmode="adjustpan"       package="com.com.app" android:versionname="1.0" android:versioncode="1" android:hardwareaccelerated="true">     <supports-screens         android:largescreens="true"         android:normalscreens="true"         android:smallscreens="true"         android:xlargescreens="true"         android:resizeable="true"         android:anydensity="true"         /> <uses-permission android:name="android.permission.camera" /> <uses-permission android:name="android.permission.vibrate" /> <uses-permission android:name="android.permission.access_coarse_location" /> <uses-permission android:name="android.permission.access_fine_location" /> <uses-permission android:name="android.permission.access_location_extra_commands" /> <uses-permission android:name="android.permission.internet" /> <uses-permission android:name="android.permission.receive_sms" /> <uses-permission android:name="android.permission.record_audio" /> <uses-permission android:name="android.permission.record_video"/> <uses-permission android:name="android.permission.modify_audio_settings" /> <uses-permission android:name="android.permission.read_contacts" /> <uses-permission android:name="android.permission.write_contacts" />    <uses-permission android:name="android.permission.write_external_storage" />    <uses-permission android:name="android.permission.access_network_state" /> <uses-permission android:name="android.permission.get_accounts" /> <uses-permission android:name="android.permission.broadcast_sticky" />   <application android:icon="@drawable/icon" android:label="@string/app_name"     android:hardwareaccelerated="true"     android:debuggable="true">     <activity android:name="app" android:label="@string/app_name"             android:theme="@android:style/theme.black.notitlebar"             android:configchanges="orientation|keyboardhidden|keyboard|screensize|locale"             android:windowsoftinputmode="statevisible|adjustpan">         <intent-filter>             <action android:name="android.intent.action.main" />             <category android:name="android.intent.category.launcher" />         </intent-filter>     </activity> </application>  <uses-sdk android:minsdkversion="7" android:targetsdkversion="17"/> </manifest>  

app.java

package com.com.app;  import org.apache.cordova.config; import org.apache.cordova.droidgap;  import android.os.bundle; import android.view.windowmanager;  public class bdh extends droidgap {     @override     public void oncreate(bundle savedinstancestate)     {         super.oncreate(savedinstancestate);         // set <content src="index.html" /> in config.xml          getwindow().setflags(windowmanager.layoutparams.soft_input_adjust_pan, windowmanager.layoutparams.soft_input_mask_adjust);          getwindow().clearflags(windowmanager.layoutparams.flag_force_not_fullscreen);         getwindow().addflags(windowmanager.layoutparams.flag_fullscreen);          super.loadurl(config.getstarturl());         //super.loadurl("file:///android_asset/www/index.html")     } } 

update

following on original answer, below javascript work on windowsoftinputmode="adjustresize", however, not work on "adjustpan" because javascript resize() event not fired when keyboard shown.

however, mentioned here, can capture keyboard shown event on java side hooking globallayoutlistener viewtreeobserver:

package com.com.app;  import org.apache.cordova.config; import org.apache.cordova.droidgap;  import android.os.bundle; import android.view.windowmanager;  public class bdh extends droidgap {     @override     public void oncreate(bundle savedinstancestate)     {         super.oncreate(savedinstancestate);         // set <content src="index.html" /> in config.xml          getwindow().setflags(windowmanager.layoutparams.soft_input_adjust_pan, windowmanager.layoutparams.soft_input_mask_adjust);          getwindow().clearflags(windowmanager.layoutparams.flag_force_not_fullscreen);         getwindow().addflags(windowmanager.layoutparams.flag_fullscreen);          super.loadurl(config.getstarturl());         //super.loadurl("file:///android_asset/www/index.html")          final view activityrootview = ((viewgroup) findviewbyid(android.r.id.content)).getchildat(0);          activityrootview.getviewtreeobserver().addongloballayoutlistener(new ongloballayoutlistener() {             @override             public void ongloballayout()              {                 // r populated coordinates of view area still visible.                 rect r = new rect();                  activityrootview.getwindowvisibledisplayframe(r);                  int heightdiff = activityrootview.getrootview().getheight() - (r.bottom - r.top);                  // if more 100 pixels, keyboard...                 if (heightdiff > 100)                  {                                     // fire off function javascript.                     this.sendjavascript("try { onkeyboardshowing(); } catch (e) {};");                 }             }         });     } } 

so when keyboard shown, can fire function javascript, indicating keyboard being shown, can adjust screen:

var fieldfocused = null;  function onkeyboardshowing() {     if(fieldfocused != null)     {         $('body').scrollto(fieldfocused, 500, {offset:-50});     } }  $(document).on('focus', 'input, textarea', function() {     fieldfocused = $(this); });  $(document).on('blur', 'input, textarea', function() {     fieldfocused = null; }); 

original answer

we had horrible time trying fix android soft keyboard covering input fields. solution came no means 'nice', worked...

you need jquery , jquery plugin called jquery.scrollto ariel flesher, found here.

now add javascript:

var fieldfocused = null;  $(window).resize(function(e) {     if(fieldfocused != null)     {         $('body').scrollto(fieldfocused, 500, {offset:-50});     } });  $(document).on('focus', 'input, textarea', function() {     fieldfocused = $(this); });  $(document).on('blur', 'input, textarea', function() {     fieldfocused = null; }); 

when textarea/input brought focus, dom element assigned variable. when window resized, window scrolled bring dom element top.

we have used android:windowsoftinputmode="adjustresize" in android manifest.

as have said not elegant of fixes, have implemented our phonegap app , works.