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

14 posts, 1 answers
  1. Answer
    Audrey
    Audrey avatar
    52 posts
    Member since:
    Jan 2013

    Posted 05 Nov 2013 Link to this post

    Hello,
     I'm making an app which contains a header, a content and a footer containing a button. But, when i click on an input, the mobile keyboard comes up, leveling up the footer also. But if the input clicked is positionned behind the button of the footer, it does as if I clicked on the button ! So I can't stay focus on my input !

    Do you have any idea to fix it ??

    http://www.casimages.com/img.php?i=131105042806523197.png

  2. Audrey
    Audrey avatar
    52 posts
    Member since:
    Jan 2013

    Posted 05 Nov 2013 Link to this post

    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)
  3. Audrey
    Audrey avatar
    52 posts
    Member since:
    Jan 2013

    Posted 06 Nov 2013 Link to this post

    This was my solution :
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, height=device-height" />
  4. Stewart
    Stewart avatar
    37 posts
    Member since:
    Oct 2013

    Posted 07 Nov 2013 Link to this post

    Audrey,

    I have a similar problem to how you describe - "But if the input clicked is positionned behind the button of the footer, it does as if I clicked on the button ! So I can't stay focus on my input !"

    I have a textarea at the bottom of the page. When I click it (therefore focusing it), the keyboard pops up and the textarea loses focus, meaning I have to scroll down to click on the textarea again to regain focus and be able to enter text.

    Is that similar to what you saw and how did you fix it? With the code above, as that doesn't seem to work for me.

    Thanks for any feedback.
    Stewart
  5. Audrey
    Audrey avatar
    52 posts
    Member since:
    Jan 2013

    Posted 08 Nov 2013 Link to this post

    Hi,
    Yes I had this problem with the textaera too and tje meta balise was my solution.Are you sure you linked the cordova.js file ?

    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, height=device-height" />
  6. Stewart
    Stewart avatar
    37 posts
    Member since:
    Oct 2013

    Posted 08 Nov 2013 Link to this post

    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
  7. Audrey
    Audrey avatar
    52 posts
    Member since:
    Jan 2013

    Posted 08 Nov 2013 Link to this post

    I use cordova 2.7 I don't know if it changes something....
    i'm sorry I don't have anything else to purpose to you...
  8. Stewart
    Stewart avatar
    37 posts
    Member since:
    Oct 2013

    Posted 08 Nov 2013 Link to this post

    Thanks Audrey.

    Anyone from Icenium or Kendo want to jump in here?

    Stewart
  9. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 08 Nov 2013 Link to this post

    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.
  10. Stewart
    Stewart avatar
    37 posts
    Member since:
    Oct 2013

    Posted 11 Nov 2013 Link to this post

    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!
  11. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 12 Nov 2013 Link to this post

    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.
  12. Stewart
    Stewart avatar
    37 posts
    Member since:
    Oct 2013

    Posted 12 Nov 2013 Link to this post

    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>
  13. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 13 Nov 2013 Link to this post

    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.
  14. Stewart
    Stewart avatar
    37 posts
    Member since:
    Oct 2013

    Posted 14 Nov 2013 Link to this post

    Thanks, that's fixed it. Much appreciated!
Back to Top