Making a div scrollable after keyboard is shown in a phonegap android app

Question

Im working on a tablet app. On the home page, there is an input for login details. This container div is the entire width and height of the screen. When the user clicks on the keyboard, the keyboard shows and takes up the bottom half of the screen. I now want to make the top half scrollable.

I have written a phonegap plugin to detect when the keyboard is shown. In my javascript, I listen for the keyboard shown event and then reduce the height of the container div by the height of the keyboard. I also have the inner div set with overflow: scroll. However, it's still not scrollable when I do this. I'm working on Android 4.2.2. Any idea's?

score 0 · Accepted Answer · edited May 23 '17 at 10:32

I finally solved this problem with below jQuery Patch :

//JS : OnReady event:

var windowHeightSeventyPercent = parseInt(screen.height * 0.7); //To support multiple devices

$("input").focusin(function(){
   $("body").height($("body").height()+parseInt(windowHeightSeventyPercent)); //Make page body scroll by adding height to make user to fillup field.
});

 $("input").focusout(function(){
   $("body").height($("body").height()-parseInt(windowHeightSeventyPercent));
 });

Refer this post.

Making a div scrollable after keyboard is shown in a phonegap android app

1 Answers1