You found a bug! We've classified it as TOUCH-4918 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    36
    Vote Rating
    2
    bjudson is on a distinguished road

      1  

    Default Software keyboard pushes tabbar up

    Software keyboard pushes tabbar up


    REQUIRED INFORMATION




    Sencha version tested:
    • Sencha Touch 2.1
    • Sencha Touch 2.2
    Browser versions tested against:
    • Safari - iOS 7 developer preview GM
    • Safari - iOS 6.1
    • Chrome 29 - Android 4.3
    DOCTYPE tested against:
    • HTML
    Description:
    I have an app in which the viewport is a TabPanel. The last card contains user login fields. When entering these fields, the software keyboard pushed up the TabBar. This occurs in iOS 7 Safari and Android 4.3 Chrome 29, but not in iOS 6.x Safari. This occurs on iOS 7 for both web app and packaged app (built with either iOS 7 SDK or iOS 6 SDK). The packaged app is using Cordova (tested with 2.3 and 2.9).


    Steps to reproduce the problem:
    • Load app
    • Tap in any form field
    The result that was expected:
    Keyboard lays over app, TabBar remains at bottom of screen (below keyboard)


    The result that occurs instead:
    Keyboard pushes TabBar up, in some cases obscuring the field


    Test Case:




    HELPFUL INFORMATION




    Screenshot or Video:

    sencha-keyboard-issue-ios6.jpgsencha-keyboard-issue-ios7.jpg

    See this URL for live test case: http://app.wabistory.org




    Debugging already done:
    • none
    Possible fix:
    • not provided
    Additional CSS used:
    I have a few hundred lines of custom SCSS, which I can provide if needed

  2. #2
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,931
    Vote Rating
    130
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Sencha Premium Member
    Join Date
    Jul 2013
    Location
    Hong Kong
    Posts
    25
    Vote Rating
    0
    alan12341234 is on a distinguished road

      0  

    Default


    This needs to be addressed quickly, its killing all apps that uses tabbar.

  4. #4
    Sencha Premium Member froamer's Avatar
    Join Date
    Sep 2007
    Location
    London, UK
    Posts
    101
    Vote Rating
    2
    froamer is on a distinguished road

      0  

    Default Not an isolated incident

    Not an isolated incident


    Yes this isn't an isolated incident, our apps are broken too.

    If you need any additional examples other than the OP's please just ask.
    Chris Copleston » Managing Director | LinkedIn | Twitter | SenchaDevs
    4dprime.com » web | mobile | desktop | server development

  5. #5
    Sencha Premium Member Matt Jenkins's Avatar
    Join Date
    Mar 2013
    Location
    Insch, Aberdeenshire, Scotland
    Posts
    24
    Vote Rating
    3
    Matt Jenkins is on a distinguished road

      1  

    Default


    This seems to push anything that is docked to the bottom also

  6. #6
    Sencha Premium Member
    Join Date
    Jul 2013
    Location
    Hong Kong
    Posts
    25
    Vote Rating
    0
    alan12341234 is on a distinguished road

      0  

    Default seriously problematic

    seriously problematic


    This needs to get fixed asap, the app is totally useless on iOS7. The docked: top / bottom will be kept when the keyboard slide up, makes the visible form unusable.

    I hope this will get fixed and won't wait for 2.3 release. this issue is killing my app on iOS7 and I can't do anything to fix it now.

  7. #7
    Sencha Premium Member
    Join Date
    Jul 2013
    Location
    Hong Kong
    Posts
    25
    Vote Rating
    0
    alan12341234 is on a distinguished road

      0  

    Default quick fix!

    quick fix!


    Put it in the app.js,


    Code:
    Ext.application({
    launch: function() {
            if (Ext.os.is.iOS) {
                if (Ext.os.version.major >= 7) {
                    
                        document.body.style.marginTop = "20px";
                        Ext.Viewport.setHeight(Ext.Viewport.getWindowHeight() - 20);
                    
                }
            }
    // other launch stuff
    }
    })
    This sort of resolve the issue for now. Please reply if there is any better hotfix or improvement

  8. #8
    Sencha User
    Join Date
    Aug 2011
    Posts
    36
    Vote Rating
    2
    bjudson is on a distinguished road

      0  

    Default


    "This sort of resolve the issue for now."


    For me, this resolves the issue of the TabBar being pushed up, but instead it pushes up other content by roughly the height of the TabBar -- the title bar goes out of the viewport.

    This seems to depend on where the input is in the view. If it is just below the titlebar, this works nicely. If it is lower down, content gets pushed up. It seems to be trying to keep the input in the middle of the viewable area.

  9. #9
    Sencha User
    Join Date
    Feb 2013
    Posts
    16
    Vote Rating
    1
    Keab42 is on a distinguished road

      0  

    Default


    From what I can tell this seems to be a change of behaviour in iOS 7. Specifically I've noticed it if the app is compiled in XCode 5 with the iOS7 SDK, but not in XCode 4.6.3 with the iOS 6.1 SDK.

    It seems that in iOS7, rather than floating over the webview, the Keyboard now actively shrinks the viewport to make room for itself.

    So, as other users have reported, anything docked to the bottom of the view such as the tab bar, or buttons will now move up the screen with the keyboard, because they're sticking to the bottom of the viewport, which is now level to the top of the keyboard.
    Last edited by Keab42; 1 Oct 2013 at 6:42 AM. Reason: Providing a little bit more context.

  10. #10
    Sencha User
    Join Date
    Feb 2013
    Posts
    16
    Vote Rating
    1
    Keab42 is on a distinguished road

      0  

    Default


    I upgraded the project to Touch 2.3.

    In our app that is built as a native app using Xcode 5 and the iOS 7 SDK, and packaged with PhoneGap 3.0 the issue has been resolved.
    Last edited by Keab42; 4 Oct 2013 at 3:30 AM. Reason: Clarifying circumstances in which the problem is fixed.