screen jumping when entering text

  • 9
  • Problem
  • Updated 6 years ago
  • Solved
It seems on certain phones, when the you enter text into any input or textarea box, the soft keyboard pops up, but the entire screen scrolls up out of view or jumps around.

I was seemingly able to fix this by editing the Android manifest xml file, but when I upload to PhoneGap Build, on other phones, it happens occasionally.

Is there something in the config.xml, JavaScript, JQuery, or something else that can fix this problem once and for all?
Photo of John Saya

John Saya

  • 68 Posts
  • 7 Reply Likes

Posted 8 years ago

  • 9
Photo of J Mayu

J Mayu

  • 7 Posts
  • 0 Reply Likes
Screen actually pushed to top to make space for softkeyboard. so if u don't want it to be pushed then content will be not visible when u enter data.
Photo of John Saya

John Saya

  • 68 Posts
  • 7 Reply Likes
Actually what I'm saying is the input box and header, although fixed, scroll up out of view, and jump back into view while you're typing. This seems to only happen once in a while on certain phones. I'm wondering if anyone else has experienced this or is aware of a workaround?
Photo of John Saya

John Saya

  • 68 Posts
  • 7 Reply Likes
So I was definitely able to pinpoint the problem to being in the AndroidManifest.xml file. To get it to work right, I added this:

android:configChanges="orientation|keyboardHidden"
android:screenOrientation="portrait"
android:windowSoftInputMode="adjustPan">

But, when I upload the app to PhoneGap Build, it must change it, because the keyboard starts jumping around on certain Android phones. Is there something in the config.xml file or any place else that can preserve this?
Photo of John Saya

John Saya

  • 68 Posts
  • 7 Reply Likes
Can the PhoneGap Build team add a feature to config.xml for the adjustPan option?

It doesn't seem like it would be a difficult thing to incorporate, especially since without it, your screen jumps around when entering text on many Android phones, making apps nearly useless when using PG Build
Photo of Chipopo

Chipopo

  • 5 Posts
  • 0 Reply Likes
+1
Photo of daarong

daarong

  • 17 Posts
  • 0 Reply Likes
+1
... guess I'll be migrating from PhoneGap Build to PhoneGap in Eclipse - are there really that many apps that don't use text input?? This seems important.
Photo of daarong

daarong

  • 17 Posts
  • 0 Reply Likes
An additional note on this problem...

After decompiling the phonegap build APK I've confirmed that it sets the windowSoftInputMode to adjustPan.

I think this is backwards from what most people would expect and want (personally I've never seen an app push its boundaries outside the viewport!!) It would seem that the developers of Android would agree - see the documentation for windowSoftInputMode at developers.android.com - where they indicate that pan is "generally less desirable than resizing".

At the very least it would be good if PhoneGap Build defaulted to what most people want and expect. Even better would be extending the "config.xml" to include setting windowSoftInputMode.
Photo of Martin Topping

Martin Topping

  • 20 Posts
  • 2 Reply Likes
Any progress on including this in config.xml?
Photo of John Saya

John Saya

  • 68 Posts
  • 7 Reply Likes
I actually think I solved this mysterious problem not that long ago. Although setting windowSoftInputMode to adjustPan did help, I noticed certain phones would still jump.

This seemed to happen mainly on HTC models with older versions of Android. But, a CSS trick seemed to cure it. After months of dealing with it, so far this appears to have fixed the plaguing screen jumping issue while typing text:

Create a CSS class to enable hardware acceleration with just 1 pixel high and wide:


.noJump {
width: 1px;
height: 1px;
-webkit-transform: translate3d(0,0,0);
float: right;
}


Place a div with the above class on the page with the issue right before an input or textarea box:


<div class="noJump"></div>
<textarea id="comments"></textarea>


I haven't had a huge number of devices to test this on, but the ones that were having the issue, it worked.

Hope that helps!

John
Photo of Martin Topping

Martin Topping

  • 20 Posts
  • 2 Reply Likes
Thanks for the quick reply, John!
Photo of Mosta Pb

Mosta Pb

  • 1 Post
  • 0 Reply Likes
Thanks John, this worked for me.
Tested on a Samsung Galaxy S and a Samsung Galaxy Young, both with android 2.3.6 and phonegap 2.9.
Photo of John Saya

John Saya

  • 68 Posts
  • 7 Reply Likes
Glad I could help :)
Photo of Asha N

Asha N

  • 5 Posts
  • 0 Reply Likes
no jumping issue now but cant able to enter 9 & if we press on 7 it will come out of the application. I am using javascript in phonegap
Photo of Martin Topping

Martin Topping

  • 20 Posts
  • 2 Reply Likes
John, unfortunately it didn't work for me. Thanks for your help!
Photo of Senthil Kumar R

Senthil Kumar R

  • 2 Posts
  • 0 Reply Likes
thanks john,.Now page is not jump. but,i can't enter number 9,. any solution for this issue,. advance tanx..
Photo of John Saya

John Saya

  • 68 Posts
  • 7 Reply Likes
Martin,

Sorry to hear the CSS trick didn't work, but I'm also pretty sure PG Build is setting the correct adjustPan option now. I know it's a pain. It was months for me to track it down on my end. Are you using the latest PhoneGap to test on?

Senthil Kumar,

I haven't personally experienced that issue but from what I've read it's also related to HTC devices and is supposed to be fixed in versions 2.0.0 and up. Are you using the latest version?

If you're still having trouble you should post in the Google PhoneGap forums. Here's a thread relating to the number 9 issue https://groups.google.com/forum/m/?fr...

John
Photo of Martin Topping

Martin Topping

  • 20 Posts
  • 2 Reply Likes
Hi, John I've now built using PhoneGap Build v2.20 and I still have the problem.
Photo of John Saya

John Saya

  • 68 Posts
  • 7 Reply Likes
Hi Martin,

It's tough to tell if you're experiencing the same effect that I was without seeing it, but I would say to be sure your input and textarea boxes are inside "100%" height and width divs along with "fixed" or "absolute" positioning, and overflow set to "auto".

Also, if you haven't already, try setting your meta viewport to the device size automatically in your index.html file:


<meta name="viewport" content="width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densityDpi=medium-dpi">
Photo of Ric Carey

Ric Carey

  • 39 Posts
  • 0 Reply Likes
if its really a big issue you could always, in javascript:

on focus of a textbox hide the fixed elemants and then on blur show them again.
Photo of Martin Topping

Martin Topping

  • 20 Posts
  • 2 Reply Likes
Hiding the fixed element wouldn't work in the context it's displayed. Thanks for the suggestion.
Photo of Senthil Kumar R

Senthil Kumar R

  • 2 Posts
  • 0 Reply Likes
hai john,. tanx for your reply,. your link is very useful to me,. fixed this issue. tanq you lot john.
Photo of Amir

Amir

  • 8261 Posts
  • 263 Reply Likes
Hello Everyone

Feature request created. Kindly please bookmark / watch the following link for status update:

Subject: [Android] Ability to adjust windowSoftInputMode
https://github.com/phonegap/build/iss...

Thanks
Photo of Asha N

Asha N

  • 5 Posts
  • 0 Reply Likes
no jumping issue now but cant able to enter 9 & if we press on 7 it will come out of the application. I am using javascript in phonegap
Photo of Amir

Amir

  • 8261 Posts
  • 263 Reply Likes
Hi Asha

You are responding to an old thread with totally different issue. Please create new topic if you believe it's related to Build service.

Thanks.
Photo of Amir

Amir

  • 8261 Posts
  • 263 Reply Likes
Topic no longer active. Original bug has been resolved. Please create new topic if needed.

Thanks

This conversation is no longer open for comments or replies.