1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    1
    Vote Rating
    0
    a.kuelzer is on a distinguished road

      0  

    Default Unanswered: Android and iOS issues with scrollable form

    Unanswered: Android and iOS issues with scrollable form


    I'm currently working on a big ST2 + Phonegap project for iOS and Android. So far everything (Scanner, CORS Ajax Requests, Geolocation) is working fine.
    The only thing I can't seem to figure out are several issues with scrollable forms. The problems on iOS and Android are different and vary depending on the devices used.

    This is my layout:
    IMG 1

    Bildschirmfoto 2013-04-09 um 15.33.33.png
    Behaviour on iOS:
    When a input field is focused, the whole viewport will be scrolled to the center of the screen, so the field will be fully visible while typing.
    Problem 1: If you use the 'next' and 'back' buttons of the softkeyboard, it will jump to the next / previous input field. If you do so from the first field to the last field of the form following bug will appear. The scrollable container get's a lot of extra padding at the bottom, but it can't be scrolled to the very top. The whole scrollable container can be scrolled off the viewport until it's not visible anymore.
    Problem 2: If you scroll the scrollable container whilst the softkeyboard is still visible, the cursor is stuck on the screen where the input field used to be at.

    Behaviour on Android:
    I turned off the default "Android webview field focus behaviour" by setting the windowSoftInputMode to 'adjustPan'. Then i implemented my own function which basically scrolls the focused field to the middle of the scrollable area. (This is shown in IMG 2)
    Problem 1: The cursor and the 'text position indicator' are rendered at the position the input field used to be at before the scroll. (I fixed the position of the cursor but not the 'text position indicators' by waiting 50ms before scrolling the field and then focusing it again after another 50ms )
    Problem 2: The content of the focused input field can be added if there is no cursor in the field, but it can't be deleted. You could delete the whole input but it'll still be visible in the field. If you focus the field again and start typing, the new input will appear before the old input.
    Problem 3: If you focus a field and start scrolling, the rendered focused field won't scroll but is stuck on the screen where the input field used to be at before scrolling. (you can see this in IMG 3)

    IMG 2

    Bildschirmfoto 2013-04-09 um 15.26.42.png
    IMG 3
    image001.png


    Has anyone experienced these problems, and by any chance has come across a solution? Am I doing something essentially wrong? I've searched the internet for these problems, but I couldn't find any working fixes.
    The common fixes i've found are:
    - android: adjustPan instead of adjustresize
    - android: use window.scrollToTop to fix gap when softkeyboard is hidden

    Hope anyone can help?!
    Attached Images

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    For the iOS issue, sounds like this reported bug: http://www.sencha.com/forum/showthread.php?233093
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member
    Join Date
    Sep 2012
    Posts
    4
    Vote Rating
    0
    Creyke is on a distinguished road

      0  

    Default


    Hi guys,

    Has there been any movement on this?

    To me, it sounds like it's related to the TOUCH-2704 bug (http://www.sencha.com/forum/showthre...081#post975081) as opposed to the TOUCH-3178 bug (http://www.sencha.com/forum/showthread.php?233093)

    Either way, has anyone managed to come up with a workable solution?

    Thanks

  4. #4
    Sencha User
    Join Date
    May 2011
    Location
    bangalore
    Posts
    7
    Vote Rating
    0
    loveferoz is on a distinguished road

      0  

    Default Same issue

    Same issue


    I have form which on filling it using tab key(on desktop) and next key on ipad, i am experiencing an extra padding which gets added to container as said by a.kuelzer . I am using sencha latest released version 2.3.1 if any help related to this will be valuable..