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

ios7 issue with keyboard obscuring input field

34 Answers 192 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Ron
Top achievements
Rank 1
Veteran
Ron asked on 28 Oct 2013, 07:03 PM
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

34 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 30 Oct 2013, 09:16 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Paul McNamara
Top achievements
Rank 1
answered on 04 Nov 2013, 10:04 AM
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?
0
Kiril Nikolov
Telerik team
answered on 05 Nov 2013, 09:00 AM
Hi Paul,

Unfortunately Kendo UI does not handle any events or do anything custom when tapping on form labels.
 
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
Paul McNamara
Top achievements
Rank 1
answered on 05 Nov 2013, 09:19 AM
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.
0
Ron
Top achievements
Rank 1
Veteran
answered on 05 Nov 2013, 01:55 PM
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.
0
BlackJK
Top achievements
Rank 1
answered on 07 Nov 2013, 10:29 AM
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, 
0
Ron
Top achievements
Rank 1
Veteran
answered on 07 Nov 2013, 02:43 PM
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
0
Dean
Top achievements
Rank 1
answered on 11 Nov 2013, 06:22 AM
I've tried Paul's solution but to no avail. Any news here?
0
Michael
Top achievements
Rank 1
answered on 13 Nov 2013, 07:25 PM
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.
0
Michael
Top achievements
Rank 1
answered on 13 Nov 2013, 08:27 PM
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.
0
Dean
Top achievements
Rank 1
answered on 15 Nov 2013, 12:29 AM
Paul, what do you mean by pinned/un-pinned mode?
0
Paul McNamara
Top achievements
Rank 1
answered on 15 Nov 2013, 09:04 AM
Pinned - added to home screen as an "app"
Un-pinned - just running in normal Safari

I should have been clearer with my terminology.
0
Petyo
Telerik team
answered on 15 Nov 2013, 11:34 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dean
Top achievements
Rank 1
answered on 18 Nov 2013, 02:04 AM
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
0
Michael
Top achievements
Rank 1
answered on 18 Nov 2013, 09:14 PM
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.
0
Dean
Top achievements
Rank 1
answered on 18 Nov 2013, 10:35 PM
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.
0
Petyo
Telerik team
answered on 19 Nov 2013, 11:42 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Ron
Top achievements
Rank 1
Veteran
answered on 21 Nov 2013, 04:03 PM
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. 
0
Hector Medrano
Top achievements
Rank 1
answered on 23 Nov 2013, 11:19 PM
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.
0
Derrick
Top achievements
Rank 1
answered on 14 Jan 2014, 05:35 PM
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>
 
0
Kiril Nikolov
Telerik team
answered on 16 Jan 2014, 08:09 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
KSBA Techie
Top achievements
Rank 1
answered on 05 Feb 2014, 01:51 AM
This fix works great on iPhones but has broken iPads completely.  

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

Thanks,
Nathan
0
Kiril Nikolov
Telerik team
answered on 05 Feb 2014, 09:38 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Brian
Top achievements
Rank 1
answered on 07 Feb 2014, 10:34 PM
Just downloaded and installed the latest kendoui...  Still broken for me...  My input fields are all embedded in listviews though.  Any ideas?
0
Kiril Nikolov
Telerik team
answered on 10 Feb 2014, 08:47 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
John
Top achievements
Rank 1
answered on 14 Feb 2014, 04:19 PM
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)
0
Kiril Nikolov
Telerik team
answered on 17 Feb 2014, 11:29 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Brian
Top achievements
Rank 1
answered on 17 Feb 2014, 02:01 PM
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?
0
Kiril Nikolov
Telerik team
answered on 18 Feb 2014, 09:41 AM
Hello Brian,

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

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
Brian
Top achievements
Rank 1
answered on 18 Feb 2014, 02:00 PM
Got it.  Thanks!
0
Brian
Top achievements
Rank 1
answered on 20 Feb 2014, 03:07 PM
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?
0
Kiril Nikolov
Telerik team
answered on 21 Feb 2014, 12:16 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Stefan
Top achievements
Rank 1
answered on 18 Mar 2014, 09:41 PM
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?


0
Kiril Nikolov
Telerik team
answered on 20 Mar 2014, 09:40 AM
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
 
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
Ron
Top achievements
Rank 1
Veteran
Answers by
Kiril Nikolov
Telerik team
Paul McNamara
Top achievements
Rank 1
Ron
Top achievements
Rank 1
Veteran
BlackJK
Top achievements
Rank 1
Dean
Top achievements
Rank 1
Michael
Top achievements
Rank 1
Petyo
Telerik team
Hector Medrano
Top achievements
Rank 1
Derrick
Top achievements
Rank 1
KSBA Techie
Top achievements
Rank 1
Brian
Top achievements
Rank 1
John
Top achievements
Rank 1
Stefan
Top achievements
Rank 1
Share this question
or