Keyboard hides the header

2 posts, 0 answers
  1. Nader
    Nader avatar
    43 posts
    Member since:
    Jun 2013

    Posted 15 Sep 2014 Link to this post


    I am building an app using KendoUI and have noticed that when the keyboard is opened in iOS, the entire webview shifts upwards which causes the header to become hidden.
    I am following this structure:
    1- A header containing a navbar where I place the title
    2- A "content" where I placed a simple listview
    3- A footer which holds a text input

    I tried moving the text box from the footer into the content but with no luck. I also tried playing around with the meta tags and the project's config.xml file, but I keep getting the same results.

    This seems to work fine on an Android device (Samsung Galaxy S3 running Android 4.1.2) where the header is fixed even when the keyboard is opened.

    Does anybody have any suggestions that would help? Even if it requires writing a PhoneGap plugin.

  2. Tsvetina
    Tsvetina avatar
    1861 posts

    Posted 17 Sep 2014 Link to this post

    Hi Nader,

    The described behavior is specific to the iOS web view behavior when the keyboard is shown. You can reproduce it without any Kendo UI components defined in the page, as it is common for all Cordova-based applications.

    Some workarounds are discussed on the internet but if decide to use one, you would need to try and choose based on your specific scenario. The most common suggestions are discussed here:

    How to prevent keyboard push up webview at iOS app using phonegap


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

Back to Top