This is a migrated thread and some comments may be shown as answers.

Tabstrip getting in the way during form input

3 Answers 72 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Damien
Top achievements
Rank 1
Damien asked on 13 Oct 2013, 12:28 PM
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

3 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 15 Oct 2013, 06:52 AM
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!
0
Robert
Top achievements
Rank 1
answered on 16 Oct 2013, 07:04 PM
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);
});
0
Kiril Nikolov
Telerik team
answered on 17 Oct 2013, 11:14 AM
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!
Tags
General Discussions
Asked by
Damien
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Robert
Top achievements
Rank 1
Share this question
or