Virtual Android keyboard is overlapping input form fields

2 posts, 0 answers
  1. Štěpán
    Štěpán avatar
    1 posts
    Member since:
    Nov 2014

    Posted 13 Feb 2015 Link to this post

    Hi,
    I have a problem with Telerik AppBuilder. I have a small application that has many input fields. It's similar to the demo http://demos.telerik.com/kendo-ui/mobile-forms/index. The virtual keyobard overlaps the input fields located on the bottom of the page when i touch them. I tried several options (disabling/enabling hw acceleration, disabling/enabling native scrolling for the view as well as for the entire kendo.mobile.Application, switching from Cordova 3.5.1 to 3.6.4). I tried the builded application (apk package) on my phones with Android 4.3 and 4.4 as well as in AppBuilder companion app.

    What should I do in order to have the keyboard that doesn't overlap the input fields?
    Thanks in advance,
    Stepan
  2. Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 17 Feb 2015 Link to this post

    Hello Štěpán,

    This is a known issue occurring in Cordova-based applications. There are various discussions on the internet about the Android soft keyboard hiding input elements near the bottom of the app. The most reliable solution seems to be scrolling the page manually to the focused input. To do this you can either set a timeout on focusing the input, as suggested here:
    Phonegap Android keyboard covers input elements scrolling is disabled

    or instead of using a timeout, use the custom Keyboard plugin to capture the keyboard show and hide events to perform the scrolling:
    Keyboard Plugin

    Regards,
    Tsvetina
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
Back to Top