Tabstrip getting in the way during form input

4 posts, 0 answers
  1. Damien
    Damien avatar
    8 posts
    Member since:
    Jan 2013

    Posted 13 Oct 2013 Link to this post

    I have noticed new, somewhat annoying behaviour in my application since updating to the iOS7 theme and latest KendoUI mobile build. Basically when I tap an input field on the form, it jumps up ready to accept text, but the  navigation tabstrip remains displayed, and gets in the way.

    Is there any way to have the tabstrip not jump up when clicking an input field?

    Thankyou.

    Regards
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 15 Oct 2013 Link to this post

    Hello Damien,

    This indeed sounds like an incorrect behavior of the Kendo UI TabStrip. I have tried to reproduce this scenario, but to no avail. Would it be possible to create a sample, showing the issue you are describing, that we can take a look at and narrow down the problem?

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Robert
    Robert avatar
    199 posts
    Member since:
    Aug 2009

    Posted 16 Oct 2013 Link to this post

    Damien,

    I got around this issue by using the following:

    var originalHeight = document.documentElement.clientHeight;
    var originalWidth = document.documentElement.clientWidth;
    $(window).resize(function () {
       
      if (document.documentElement.clientHeight == originalWidth &&
        document.documentElement.clientWidth == originalHeight) {
        originalHeight = document.documentElement.clientHeight;
        originalWidth = document.documentElement.clientWidth;
      }
     
      if (document.documentElement.clientHeight < originalHeight) {
        if (document.documentElement.clientWidth > originalWidth) {
          var itm = document.activeElement;
          if ((itm.tagName != 'INPUT') && (itm.tagName != 'TEXTAREA')) {
            $('.footer').show();
          }
        }
        else {
          $('.footer').hide();
        }
      } else {
        $('.footer').show();
      }
    });
     
    $("input[type=text], input[type=password], input[type=email], textarea").focus(function () {
      $('.footer').hide();
    });
    $("input[type=text], input[type=password], input[type=email], textarea").blur(function () {
     
      setTimeout(function () {
        var itm = document.activeElement;
        if ((itm.tagName != 'INPUT') && (itm.tagName != 'TEXTAREA')) {
          $('.footer').show();
        }
      }, 300);
    });
  4. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 17 Oct 2013 Link to this post

    Hello Damien,

    I am glad to hear that you found a solution, but still would it be possible to extract a runnable sample of your application where the issue you were having can be observed. It will be really helpful for us.
     
    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top