ios7 issue with keyboard obscuring input field

[Ron]

kendo: kendoui.complete.2013.2.1021.commercial
phone gap: 3.10 also tried with 2.7.0 and got same result

It works well with any ios version before ios 7. With ios7 the keyboard hides the input fields.

After investigation I suspect it is related to the position css attribute of kendo

Attached images showing the correct behavior in ios6 and the wrong one in ios7

[Kiril Nikolov]

Hello Ron,

This is an issue in iOS7 and not in Kendo UI Mobile itself. At the moment there is not fix that we can offer you at the moment. We really hope that it will be fixed with one of the next releases of the operating system.
 
Regards,
Kiril Nikolov
Telerik

[Paul McNamara]

We have observed the same thing but recently noticed something interesting. The form in question uses similar markup to the examples on the Kendo website (each field being a listview li with a label which subsequently contains the input). If the user taps the input itself then the keyboard will obscure the field and the page will not scroll, if however the user taps the label then it works as you would expect and the field is focused and appears above the keyboard.
I suspect this is still an iOS issue and not a Kendo one but can you confirm that Kendo does not handle any events or do anything custom when tapping on form labels?

[Kiril Nikolov]

Hi Paul,

Unfortunately Kendo UI does not handle any events or do anything custom when tapping on form labels.
 
Regards,
Kiril Nikolov
Telerik

[Paul McNamara]

I've managed to get a partial workaround up and running using the following code:

$("#MyFormView input, textarea, select").kendoTouch(
            {
                tap: function (e)
                {
                    $(e.event.target).focus();
                }
            }
            );

This doesn't affect it in un-pinned mode but in pinned mode it will make sure the tapped input will get focus and then it scrolls into view as soon as the user starts typing.

I'm convinced this is an iOS issue now but at least we're 50% of the way to a workaround.

[Ron]

Actually, we seem to see the same issue on a test build on Android, so I am not certain that this is an iOS7 only issue.

I will investigate more and we will see.

Ron.

[BlackJK]

Also experiencing this problem, our app become nearly unusable on iPhone 4 / iOS7

@ Ron :
Any news about Android? I also have this bug for iOS 7 / especially iPhone 4
But I can't reproduce it on Android
Do you have more details? What is the HTML used / which device do you use ?
With your information I'll try to reproduce it on my side too.

@Telerik : 
Do you know if this problem is linked to the this specific markup -- ie. the fact that the form is embedded in a listview ?
Do you have a little more details about this problem ?

Thanks a lot for your reply, 

[Ron]

On ios7 the workaround suggested by Paul McNamara seems to help us.

On Android, it depends on the location of the input screen.

The attached shows it being partially obscured on a Samsung S3

[Dean]

I've tried Paul's solution but to no avail. Any news here?

[Michael]

I have this issue also, but not only does the input not focus, the keyboard entries do not appear in the field because it is not focused. It works if you click the label, but not if you click the input box.

[Michael]

Okay,  I worked out a solution. As an example, my form has two input fields with IDs "username" and "password". I created two labels around these with IDs "userlabel" and "passlabel". Then I exploit the fact that the label tap behavior works correctly:

   document.addEventListener("deviceready", function () {
        if (device.platform === 'iOS' && parseFloat(device.version) >= 7.0) {
            $("#username").bind("mouseover", function () { if(event.currentTarget === this){ $("#userlabel").click() } });
            $("#password").bind("mouseover", function () { if(event.currentTarget === this){ $("#passlabel").click() } });
        }
    }, false);

On mouseover, it checks to see if the input is the current event target. If it is, then it triggers the click on the label, which in turn focuses the input box.

NOTE:
- you can go without if(event.currentTarget === this) in most instances.
- since it is a mouseover event, it may be undesirable on other devices or in specific cases, so be careful with it.

[Dean]

Paul, what do you mean by pinned/un-pinned mode?

[Paul McNamara]

Pinned - added to home screen as an "app"
Un-pinned - just running in normal Safari

I should have been clearer with my terminology.

[Petyo]

Hi everyone,

I just wanted to share that we are closely following this case. So far, it looks like the following cordova 3.1 issue (first in the list) is one possible cause. We will re-visit it once cordova 3.2 is out. 

Meanwhile, some customers have decided to hide the application header/footer when an input is focused - this seems like a reliable approach, too.  

Regards,
Petyo
Telerik

[Dean]

Hi Petyo,

I'm having these issues with Cordova 2.7, therefore it won't be caused by changes made in later versions of Cordova.

Dean

[Michael]

If you're just working with native mobile apps, try the solution I posted. If you don't want input labels, you could probably leave them blank and achieve the same effect.

[Dean]

Thanks Michael, I have implemented your solution. Actually, it's in review for the app store now. Occasionally it bugs out but for the most part seems to work.

Still, it would be nice to not have to implement workarounds like this.

[Petyo]

Hi Dean,

Cordova 2.7 was released prior to iOS 7. It is likely that the problem manifested itself later, by a change introduced in iOS 7, which is yet to be handled correctly. 

Regards,
Petyo
Telerik

[Ron]

FWIW, The problem still exists with the latest Kendo release on Android. I understand that this might be a PhoneGap issue, just wanted to update you so we are clear about it. 

[Hector Medrano]

Not the best solution but I just added the min-height to be large enough so that it scrolls into view when keyboard appears. Seems to work for what I need.  It has to be a css theme issue with overflow. It does not do it when I exclude the kendo and use only html. Hope it helps.

[Derrick]

I think Hector is correct.  We are using Kendo Mobile, but not phonegap/cordova and we are experiencing this issue.  It is likely a CSS overflow issue that arose in iOS 7 after Apple changed their HTML engine and removed something they though was a lax standard.  In any case, straight HTML works, so I am not sure Apple will see the need to fix this.   Kendo, is there a good workaround for this behavior?

Thanks,
Derrick

Basic HTML works fine:

<!DOCTYPE html>
<html>
<head>
    <title>Test Input</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.mobile.min.js"></script>
    <link href="css/kendo.mobilecommon.min.css" rel="stylesheet" />
    <link href="css/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body id="testbody">
    <div id="forms">
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <input type="text" />
    </div>
</body>
</html>


When you jus add the Kendo Application it doesn't:

<!DOCTYPE html>
<html>
<head>
    <title>Test Input</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.mobile.min.js"></script>
    <link href="css/kendo.mobilecommon.min.css" rel="stylesheet" />
    <link href="css/kendo.mobile.all.min.css" rel="stylesheet" />

    <script>
        var app = new kendo.mobile.Application(document.body);
     </script>
</head>
<body id="testbody">
    <div id="forms" data-role="view" data-title="Test Form Elements">
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <input type="text" />
    </div>
</body>
</html>
 

[Kiril Nikolov]

Hi Derrick,

As I already informed you in the other thread that you opened

In the latest version of Kendo UI Mobile we have introduced a fix that takes care for the issue that you are describing - keyboard overlaying the input elements

So please download it and give it a try.

Regards,
Kiril Nikolov
Telerik

[KSBA Techie]

This fix works great on iPhones but has broken iPads completely.  

Please fix soon I have 5 apps down on iPads...

Thanks,
Nathan

[Kiril Nikolov]

Hi,

As I already told you in the support request that you have sent us - we are currently working on this issue, so a fix will be released soon.

Regards,
Kiril Nikolov
Telerik

[Brian]

Just downloaded and installed the latest kendoui...  Still broken for me...  My input fields are all embedded in listviews though.  Any ideas?

[Kiril Nikolov]

Hello Brian,

Could you please extract a runnable sample, where this issue can be reproduced? I am not able to observe this behavior on our test devices, so an example that will point us in the right direction will be helpful.

Thank you in advance.

Regards,
Kiril Nikolov
Telerik

[John]

I am also experiencing this issue on iOS7 after downloading latest kendo. I have a native app that wraps around a webview. When you first touch a textbox inside of a listview, the keyboard opens, but the textbox does not have focus. Since the keyboard covers the textbox, you have no way of knowing this, so anything you type goes into the void. You have touch the textbox again to give it focus.
Sample:
items.Add().Content
(
@<text>
<table style="margin-right:6px">

<tr>
<td colspan="1">
@Html.TextBoxFor(m=>Model.UserID, new {style = " width:95%; border:1px solid gray; margin-right:12px; padding-left:12px" })
</td>
</tr>

HtmlTextArea has same issue:
@Html.TextArea("txtNote", new { style = " width:100%; border:1px solid gray;" })

However, when you use "EditorFor", you do not have a problem:
@Html.EditorFor(m => Model.Name)

[Kiril Nikolov]

Hi John,

The issue has been resolved in the latest build - 2013.3.1414. Please download this build, update your app and let me know if the problem is still there.

Regards,
Kiril Nikolov
Telerik

[Brian]

Hi Kiril.  I tried to get this build via the Telerik Control Panel but The version there is 2013.3.1324.  Where do I download the one you mention?

[Kiril Nikolov]

Hello Brian,

Please check the screenshot attached, as it might help you find the build.

Regards,
Kiril Nikolov
Telerik

[Brian]

Got it.  Thanks!

[Brian]

Hmmm, the functionality works but I'm getting all kinds of weird behavior using this update.  If I just include the kendo.all.min.js, I get extremely sluggish behavior.  Additionally, on Ajax calls, I get the loading popup but it never goes away.  If I also include the latest css files, The loading popup appears differently and the word loading is cut off at the bottom of the screen.  Are you seeing any of these issues?

[Kiril Nikolov]

Hello Brian,

The loading popup was changed from the 2013.2.918 version, so the new popup behavior that you see is by design. As for the other issues I am not aware what is causing them, as we do not have such issues reported at the moment.

I would suggest you to isolate examples and open a new support or forum thread, so we can take a deeper look.

Regards,
Kiril Nikolov
Telerik

[Stefan]

Hi Telerik and Community.

Today i downloaded the internal 2013.3.1513 release because of the inputs move offscreen problem.

I read that it should be fixed with version 2013.3.1414.
When my html5 app runs on ipad (ios7) inside Safari, the title bar seems to be off position, look as something like padding-top 2em. When running as App from the Home Screen  the header positiones nice where it should.

But that's just a side effect. The main problem still exists at my side; tested on 2 different ipads (both ios 7) on 2 different servers. The complete document scrolls off screen when an input gets the focus and the keyboard comes up.

It's working as it should on an iphone 5 with ios6, and in an Ios Simulator (xcode) for version 6 (no matter whether i use ipad or iphone).

Any ideas about this?

[Kiril Nikolov]

Hello Stoyan,

I will start with your second question - the view scrolls up in order to prevent obscuring of the input. This is by design and this is the default Safari implementation. At the moment there is no workaround or any viable solution that we can offer you.

As for the status bar issue - could you please provide us with the exact setup how this issue can be reproduced? Do you have statusBarStyle set to translucent along with appMode setting? If this is the case please remove the appMode configuration, as it is no longer supported (with the latest version). This should fix this issue.

I would also like to ask you to submit a separate support request/forum thread, as this one is discussing another issue and is relatively old. We will be more than happy to assist you.

Regards,
Kiril Nikolov
Telerik