Phonegap on Android: Layout scrollable when using

Question

I just started creating a mobile application with Maqetta for phonegap on Android and WindowsPhone. The application includes some webpages with text-input so I need the soft-keyboard to work.

My problem is that the keyboard reacts totally different on the two operating systems. On windows phone, when I click a text box, the Keyboard shows up and covers all the things that are located underneath it. To reach the other text boxes, I can still scroll in the field that shows my website and select it. In addition, which is quite important for me, the website is not compressed. That is exactly what I want.

On Android, things are a little more complicated. After doing a lot of research I stumbled upon these guys:

android:windowSoftInputMode="adjustResize" and android:windowSoftInputMode="adjustPan"

I have tried both, but both do not fit my needs. adjustRezise compresses my website (because the website is height:100%) and adjustPan covers everything underneath it without any possibility to reach it (except for closing the keyboard and reopening it for every textbox // and having to type without seeing what you type).

I have also heard about ScrollViews and stuff like that, but as I am new to this topic i have no clue what the heck that is and how to use it, because i am focusing on the html and css part of the app, so if you have any tips there please keep in mind that it might take some information for me to understand. ;)

I would be very happy if one of you could help me with this problem. I hope there is a solution.

Answer 1

Setting height: 150% did not work for me. It made page scrollable even if there is not enough content to scroll. Following solution (mixed of CSS & Javascript) worked for:

1. In CSS: I kept height of app/HTML: 100%; and overflow-y: auto;

   #container {
      height: 100%;
      overflow-y: auto;
   }
   

2. Detect focused textarea or input, then wait a while until keyboard is shown and finally scroll the page to reach focused input.

   $("#textarea").focus(function(e) {
       var container = $('#container'),
       scrollTo = $('#textarea');
   
       setTimeout((function() {
          container.animate({
          scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
          });
       }), 500);
   
   });
   

   When keyboard is hidden the text-area keeps focused, so if it's clicked again the keyboard will show and the container needs to scroll again to show the input

   $("#textarea").click(function(e) {
       e.stopPropagation();
       var container = $('#container'), //container element to be scrolled, contains input
       scrollTo = $('#textarea');
   
       setTimeout((function() {
           container.animate({
           scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
         });
       }), 500);
   });