Worklight/Dojo - Keyboard hides input field

Question

In my application I have a search box at the bottom of the screen.

When the user focuses on the input field, the keyboards comes to view but the input field is now hidden behind the keyboard. Once the user starts typing, only then input field will be visible - but only half of the input field.

This problem is happening only in Android...

  <div id="HomeScreen"   data-dojo-type="dojox.mobile.View" data-dojo-props="selected: false">
  <div class="header">
     <div class="header_name">
        <div id="header_menu_panel">
           <div id="menu" class="menu_field"><img src="images/menu.png"></div>
           <div id="like" class="menu_field"><img src="images/like.png"></div>
        </div>
     </div>
  </div>
  <div id="_ddPanel">

     <div id="ddPanel" data-dojo-type="dojox.mobile.ScrollableView">
     <form action="" id="ddPanelForm">
        <div id="dropdown_panel">
           <div id="dd1" class="dropdown_fld">
              <span class="blue_text">drop1</span><br/>
              <select id="industry_dropdown">
                 <option value="0">Select</option>
              </select>
           </div>
           <div  id="dd2" class="dropdown_fld">
              <span class="blue_text">drop2</span><br/>
              <select id="sa_dropdown">
                 <option value="Select">Select</option>
              </select>
           </div>
           <div id="dd3" class="dropdown_fld">
              <span class="blue_text">drop3</span><br/>
              <select id="kpi_dropdown">
                 <option value="Select">Select</option>
              </select>
           </div>
           <br/>
        </div>
        <div   class="h_center" style="text-align: center;"><input type="submit" id="option_search_sbumit"  value="Submit"/></div>
        <div id="Subdrivers"></div>
        </form>
     </div>

  </div>
  <form action="" id="mainSearchForm">
  <table id="search_panel">
     <tr>
        <td>
           <input type="search" id="search_input_field" width="100px" />
        </td>
        <td width="30px"><input type="submit" value="" id="search_button" /></td>
     </tr>
  </table>
  </form>

enter image description here

And tell on which version of android *and* device (unless it's emulator) it is happening ? — Patrick Ruzand, Mar 27 '14 at 06:52
Tested the code on an Android device running Android version 4.4.2. I put the search box at the bottom of the screen and on focus the keyboard appeared and shifted the form field above it, completely visible. In your case can you tap (and possible drag) the main view above the keyboard to view the form completely? — nspeete, Mar 27 '14 at 17:03
@nspeete Find Image here https://drive.google.com/file/d/0B3MYRm_9kbmzRGV2Z1ctTjRhems/edit?usp=sharing — user3361504, Mar 28 '14 at 12:30
@user3361504, is this resolved? if not, do you have any additional code, or is this all of it? where is the input field placed in your app? a specific location? — Idan Adar, Apr 29 '14 at 19:13
@IdanAdar it is not resolved.Search field is placed in bottom of the screen. — user3361504, May 05 '14 at 09:15
@user3361504, need more code to reproduce the issue, can you provide a demo project? — Idan Adar, May 24 '14 at 08:30

score 0 · Answer 1 · edited May 23 '17 at 12:31

Per my answer in the following question, I do not believe this is at all about Dojo nor Worklight, but rather about the behavior of the virtual keyboard in Android in web apps.

Please review: How to auto-scroll to input field in Android when the soft keyboard overlaps them on showing?

Here are some suggested solutions:

Textbox hidden below keyboard in Android webview
html textfield in WebView in an Android application is hidden by the soft keyboard
Keyboard hiding EditText when android:windowTranslucentStatus=true
You could possibly also use iScroll.js (lite edition) - or implement this yourself by catching the focus event - to scroll a specific amount of pixels upwards.

Worklight/Dojo - Keyboard hides input field

1 Answers1