Page Content Don't Scroll When Keyboard Shows Phonegap

page content don't scroll when keyboard shows phonegap

I had this problem as well - the underlying problem it seems is you can't edit the androidManifest file with Phonegap Build - all you can do is edit the config.xml file which really only allows you to change a limited subset of settings.
What I would like (and a lot of others have been screaming for a long time fo) is to be able to change the windowSoftInputMode.

I did however find a solution to my problem - which was the keyboard appearing over fields at the bottom of the screen which I think is the same problem you're having.
For me - I'm using the latest phonegap 2.7.0 (but was able to reproduce the same behaviour and solution by specifying phonegap 2.5.0 in the config.xml file)

The solution I found was to change this setting in config.xml

<preference name="fullscreen" value="false" />

This does mean you get the 'status bar' at the top of the screen.. which is no biggie for me (in fact I think it's better to have it there.. at least for my app) - with that setting set to "false" instead of "true" - the page now scrolls up to reveal the field you're editing when the keyboard opens. (to be more precise, I believe the viewport changes rather than scroll up)

Hope that helps and solves your problem.. took me hours of searching and fiddles to get it to work (if I didn't find that I would have had to abandon phonegap build)

joy!
Dylan

Phonegap Android keyboard covers input elements scrolling is disabled

For most of the cases in config.xml change the full screen preference to false. that'll do the trick.

<preference name="fullscreen" value="false" />

input field hidden when soft keyboard appears in phonegap

Remove this line from config.xml

<preference name="android-windowSoftInputMode" value="adjustResize|stateHidden" />

And change the line in 'head of web page' to

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

PhoneGap Page scroll up after Keyboard appearance in iOS devices that makes the PhoneGap page corrupted

In order to fix this Issue temporarily (because it shows breaks while keyboard is showing), you can set "KeyboardShrinksView" to "true" in your configuration file (config.xml) or add it:

<widget>
  ...
  <preference name="KeyboardShrinksView" value="true" />

  <plugins>...

Preventing iOS Keyboard from scrolling page in cordova 3.5

Add this plugin with

cordova plugin add https://github.com/driftyco/ionic-plugins-keyboard.git

in the command line.

Add the following line anywhere it the javascript to disable scrolling from the keyboard.

cordova.plugins.Keyboard.disableScroll(true);

In my use case, I added a deviceready event listener to evaluate this line, disabling the automatic keyboard scrolling everywhere in the app.

That's it!

window.scrollTo not working in phonegap - alternative solution or workaround?

After doing some research, I realized window.scrollTo() does actually work in iOS6 with phonegap 2.1, there was something else that failed; for some reason, document.height didn't yield a property of equal proportion within UIwebView so I had to write a small workaround. I'll post the solution and the entire code below for future reference.

function setKeyboardPos(tarId) {

//programmatically: set scroll pos so keyboard aligns perfectly underneath textfield
var elVerticalDistance = $("#"+tarId).offset()["top"];
var keyboardHeight = 157;

if(isNativeApp()) { keyboardHeight = 261; } //I choose to change the keyboard height for the sake of simplicity. Obviously, this value does not correnspond to the actual height of the keyboard but it does the trick
var keyboardTextfieldPadding = 2;
var heightOfView = document.height;
var inputHeight = $("#"+tarId).outerHeight();

var viewPortSpace = heightOfView-keyboardHeight-keyboardTextfieldPadding; //180
var verticalNewSroll = (elVerticalDistance+inputHeight)-viewPortSpace;
if(verticalNewSroll<0) { verticalNewSroll = 0; }
////

//OK, all done lets go ahead with some actions
$("#footer").hide(); //hide footer so that the keyboard doesn't push it on top of textfield
$("#containingDiv").css("bottom","0px"); //remove bottom space for footer
window.scrollTo(0,verticalNewSroll); // perform scroll!

}

function isNativeApp() {

var app = (document.URL.indexOf('http://') === -1) && (document.URL.indexOf('https://') === -1);
if (app) {
    return true; // PhoneGap native application
} else {
    return false; // Web app / safari
}

}

Android Phonegap Scroll not work

You have run into an android bug. Overflowing DIVs inside BODY tag wont allow you to scroll. Same bug was there in iPhone (iOS < 5), but there atleast you could use two fingers and scroll.

However there are workarounds for it. You can use third party libraries such as iScroll, touchScroll ...

iScroll will disable your inputs for the div which you have applied scroll to. If its a simple paragraph use iScroll.

Reference

---

Related Topics