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

Click on input levels up the footer on the keyboard whitout change the view !

13 Answers 1168 Views

General Discussion

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

This question is locked. New answers and comments are not allowed.

13 Answers, 1 is accepted

answered on 05 Nov 2013, 04:21 PM

I found this tempory solution :

var initialScreenSize = window.innerHeight; 
window.addEventListener("resize", function() {
   if(window.innerHeight < initialScreenSize){
        $("footer").hide(); 
   } else{ 
        $("footer").show(); } });

}

But I would also like the content automatically scroll in order to place the clicked input at the top of the screen (below the header)

answered on 08 Nov 2013, 01:23 PM

Hello Audrey,

This is my header:

<head>

<title></title>

<meta charset="utf-8" />

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, height=device-height" />

<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />

<link href="styles/main.css" rel="stylesheet" />

<link href="styles/topcoat-mobile-light.css" rel="stylesheet" />

<link href="styles/overrideStyles.css" rel="stylesheet" />

<script src="cordova.js"></script>

<script src="kendo/js/jquery.min.js"></script>

<script src="kendo/js/kendo.mobile.min.js"></script>

<script src="scripts/app.js"></script>

<script src="scripts/login.js"></script>

<script src="scripts/apiConnect.js"></script>

</head>

The build number of my cordova.ios.js is 3.0.0-0-ge670de9

Stewart

answered on 08 Nov 2013, 04:03 PM

kendo.zip

Hi Stewart,

Audrey's suggestion looks like should work as well. Either way, find attached a Kendo UI template that uses similar fix and works in our tests.

Regards,
Steve
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.

answered on 11 Nov 2013, 05:32 PM

01.jpg

02.jpg

03.jpg

04.jpg

05.jpg

I'm sorry Steve, that didn't seem relevant, at least I couldn't find anywhere there is a textarea that would be hidden by the footer!

This only applies when the textarea is low enough down the page that it will be covered by the keyboard. Confusingly, when my iPad is connected to my PC and I am running the app directly from Icenium, it works as expected. However, when I build the app and distribute through TestFlight, it goes wrong.

I've attached 5 screen shots to show this behavior:

#1 - immediately after clicking on the text area when it is above the "keyboard line"
- NO PROBLEM

When directly connected:
#2 - before clicking on the text area when it is below the "keyboard line"
#3 - after: NO PROBLEM the text area has scrolled up and is focused.

When viewing the app distributed through TestFlight:
#4 - before clicking on the text area when it is *below* the "keyboard line"
#5 - after: PROBLEM - the text area is *below* the keyboard and not focused

Can you assist? Should I put a support request in? What's the usual process for this! Please help as it's driving me nuts and is the last thing wrong with the app and my client is starting to wonder if Icenium is such a good route for future apps, which I don't want them to think.

Thanks!

answered on 12 Nov 2013, 04:30 PM

Hi Stewart,

The Kendo project I have attached in my previous post is modified version of the default Kendo UI template that is shipped with Icenium. With that said you could very easily see the differences in both projects, especially because it is a single line change in app.js. The second view in that template contains two inputs that would cause the same problem as you describe in your post, however the issue would not surface with the suggested fix.

In Icenium v.1.9, the Kendo UI template contains a fix for the notorious status bar change in iOS 7 (for more info see Everything Hybrid Web Apps Need to Know About the Status Bar in iOS7). If your app is upgraded from previous version of Icenium however, you would need to apply the changes manually. Namely after updating your Kendo UI Mobile library (see Update the Code Libraries in Your Project), make sure to initialize your Kendo application with the following code.

var os = kendo.support.mobileOS,

statusBarStyle = os.ios && os.flatVersion >= 700 ? "black-translucent" : "black";

var app = new kendo.mobile.Application(document.body, { statusBarStyle: statusBarStyle });

That takes care of the iOS UIWebView overlaying the status bar. About the keyboard overlaying the selected input, you can use the following one line fix in Cordova's deviceready event:

function onDeviceReady() {

$(document.body).height(window.innerHeight);

}

If you're still having problems with your app, let us know its name, provide any requires info (login credentials, where to click to get to problematic view etc) and we would advise you accordingly. Please note that this is not an Icenium issue, this is a problem that is caused by breaking changes in the iOS 7 SDK and they would surface in any hybrid app (app that uses UIWebView).

About your last inquiry, support tickets are included only with Professional and Ultimate Icenium licenses.

Regards,
Steve
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.

answered on 12 Nov 2013, 06:32 PM

Thanks Steve,

That's some interesting reading and explains what's going on.

I'd already taken care of the status bar, and thanks for the hints on the keyboard overlaying the selected input, but where do I put the JavaScript? I've tried in both app.js and in index.html, neither of which seem to fire - at least, the alert I put in doesn't show... (I should say I've only tested in the emulator as of now)

<script>

function onLoad() {

document.addEventListener("deviceready", onDeviceReady, false);

}

function onDeviceReady() {

$(document.body).height(window.innerHeight);

alert(1);

}

</script>

answered on 13 Nov 2013, 04:41 PM

Hello Stewart,

That is the most likely your problem - the event should be fired in order for the code to be executed. The deviceready event registration looks correct and should work (it does in our local tests). Are you certain the reference to cordova.js is the first in your head section? You could also try this code instead:

<script type="text/javascript">

document.addEventListener('deviceready', function () {

$(document.body).height(window.innerHeight);

}, false);

</script>

Regards,
Steve
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Click on input levels up the footer on the keyboard whitout change the view !

13 Answers, 1 is accepted