Keyboard Showed messed up elements' position

Question

I have game which require the input of touch keyboard of the mobile. Its display has problem, whenever the keyboard shows up at the text input focus, all my element which position: absolute gets all messed up.

Is there a plugin that enables mobile keyboard to always show up so that I re-position all the elements OR I need to alter the css to make the elements so that the do not mess up when the keyboard shows up?

How should I implement this?

This is one of the element css:

#mixer{  
    position: absolute;  
    bottom:29%;
    left:25%;
    width: 234px;  
    height: 210px;  
    background: transparent url(img/mixer.png) 0 50px no-repeat;  
}

enter image description here

Note: I am using Jquery mobile, phonegap on Android environment.

Can you provide some more information? Like HTML and the related style. — Nick Stemerdink, Nov 13 '12 at 22:03

score 18 · Accepted Answer · answered Nov 15 '12 at 14:16

18

In your AndroidManifest.xml, add the following line under the activity with the keyboard:

android:windowSoftInputMode="adjustNothing"

answered Nov 15 '12 at 14:16

Heigo

936
8
18

score 1 · Answer 2 · answered Nov 10 '12 at 05:33

1

I think that your problem is with your Bottom attribute set to "in this case" 29%. you may want to set it as absolute with TOP instead of bottom.

That way it will be pushing from top instead of looking at the bottom, in this case the keypad.

so you want it at 29% of bottom, 100 - 29 = 71 Remove bottom 29% and change it to top 71%.

answered Nov 10 '12 at 05:33

Manuel Choucino

667
4
6

It still changes my elements – shoujo_sm Nov 10 '12 at 23:49
I believe you would have to specify it in pixels to get a fixed position, otherwise this answer should be correct. – dxc Nov 16 '12 at 06:14

score 1 · Answer 3 · edited May 23 '17 at 11:45

Listen for the show / hide Softkeyboard events. This answer on SO has a code example:

Softkeyboard event Listener in Android

When the Softkeyboard is in shown state, use a separate 'keyboard-is-shown' CSS for your game. When the Softkeyboard is hidden, revert to the previous 'keyboard-is-closed' CSS.

This previous Q&A on SO deals with a similar situation:

phonegap application layout issue with soft keyboard in Android 2.3.6 and in iPhone 5.0

score 1 · Answer 4 · answered Nov 16 '12 at 03:16

I ran into this on an iPad app rather than android, but it looks like the same issue.

jQuery mobile sets the page height with javascript when the size changes - anything aligned to the bottom of the page gets moved up in the html, at the same time as the OS scrolls the entire view up to keep the input's previous position visible.

I fixed the issue with some css that makes the browser ignore the height setting. It also makes orientation changes a whole lot smoother.

.ui-mobile, .ui-mobile .ui-page {
    min-height: 100% !important;
    }

score 1 · Answer 5 · answered Nov 16 '12 at 15:19

Check out these links-

http://android-developers.blogspot.in/2009/04/updating-applications-for-on-screen.html

http://developer.android.com/reference/android/R.attr.html#windowSoftInputMode

Try adding in manifest android:windowSoftInputMode="adjustResize" parameter to your activity tag.

Hope it helps.

Keyboard Showed messed up elements' position

5 Answers5

Linked