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;  
} 

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

Answer 1

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

android:windowSoftInputMode="adjustNothing"

Answer 2

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%.