Keyboard pushes footer up on Android?

3 posts, 1 answers
  1. Answer
    Robert
    Robert avatar
    199 posts
    Member since:
    Aug 2009

    Posted 09 May 2013 Link to this post

    There is a behavior when using Android 4.0.4 - Samsung Galaxy Note (Possibly others) where the keyboard is displayed underneath the application footer.  So essentially it is pushing the footer up and thus hiding the application instead of overlaying the application like iOS or even a normal website.

    Does anyone know what is causing this or have any idea of how to fix it?

    Robert
  2. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 13 May 2013 Link to this post

    Hello Robert,

    I am afraid that we don't have any workaround for this behavior - it is all up to the soft keyboard implementation of the operating system. 

    Greetings,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Oscar
    Oscar avatar
    185 posts
    Member since:
    Oct 2010

    Posted 21 Aug 2013 Link to this post

    The solution given by Michael, though it is a good one, does not work 100% on stock Android 4.3 (for example), the reason:
    - When you focus an input and the keyboard shows up, you have the option to close the keyboard, but when you close it on purpose the input field does not lose the focus, so you end up with the footer missing.

    A workaround, could be this one:
    var originalHeight = document.documentElement.clientHeight;
    var originalWidth = document.documentElement.clientWidth;
    $(window).resize(function() {
        // Control landscape/portrait mode switch
        if (document.documentElement.clientHeight == originalWidth &&
             document.documentElement.clientWidth == originalHeight) {
            originalHeight = document.documentElement.clientHeight;
            originalWidth = document.documentElement.clientWidth;
        }
        // Check if the available height is smaller (keyboard is shown) so we hide the footer.
       if (document.documentElement.clientHeight < originalHeight) {
           $('.footer').hide();
       } else {
           $('.footer').show();
       }
    });
Back to Top