Results 1 to 7 of 7

Thread: Scrolling broken after using iOS soft keyboard's 'Next' button

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    4
    Vote Rating
    0
      0  

    Default Scrolling broken after using iOS soft keyboard's 'Next' button

    REQUIRED INFORMATION

    Sencha Touch versions tested:
    • 2.0.1
    • 2.0.1.1
    Browser versions tested against:
    • Safari (on iOS 5.1.1)
    • Chrome 19.0.1084.60 (on iOS 5.1.1)
    DOCTYPE tested against:
    • html (as in HTML5)
    Description:
    • When you use the 'Next' button in the iOS soft keyboard and it has to 'scroll' to the next text field, it ruins Sencha Touch's scrolling.
    Steps to reproduce the problem:
    • Tap the first text field
    • Tap 'Next' a few times on the soft keyboard that appears to get to the last text field
    • Tap 'Done'
    The result that was expected:
    • I should still be able to scroll back up to see the first text field
    The result that occurs instead:
    • The view has been reset so that the 'top' of the scrollable area is just above the last text field and the 'bottom' is way out in blackness
    Test Case:
    Code:
    Ext.Loader.setConfig({
        enabled: true
    });
    
    
    Ext.application({
        name: 'SenchaFiddle',
        
        launch: function() {
            Ext.Viewport.add(Ext.create('Ext.Panel', {
                fullscreen: true,
                scrollable: 'vertical',
                items: [{
                    xtype: 'textfield',
                    placeHolder: 'text',
                    minHeight: '400px'
                }, {
                    xtype: 'textfield',
                    placeHolder: 'text',
                    minHeight: '400px'
                }, {
                    xtype: 'textfield',
                    placeHolder: 'text',
                    minHeight: '400px'
                }]
            }));
        }
    });
    HELPFUL INFORMATION

    Possible fix:

    • Looks like Sencha Touch uses -webkit-transform: translate3d to do its scrolling. Maybe this is incompatible with the 'scrolling' that the soft keyboard's 'Next' button does?
    Additional CSS used:
    • only default sencha-touch.css
    Operating System:
    • iOS 5.1.1

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      0  

    Default

    Thanks for the report.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    19
      0  

    Default

    This is why we don't use translate3d on Form panels...

    Your scrollable configuration will need to be:

    scrollable: {
    translationMethod: 'scrollposition'
    }

    Though this will impact performance somewhat, it should resolve the scrolling issue. You can also use a Form panel instead which does this as well.

    Sencha Inc

    Jamie Avins

    @jamieavins

  4. #4
    Sencha User
    Join Date
    Jul 2012
    Posts
    4
    Vote Rating
    0
      0  

    Default

    Well, that does fix the problem, but it has a weird side effect. When you first start scrolling after tapping 'Done' per the last step, it instantly jumps to the top of the panel then starts scrolling from there.

  5. #5
    Sencha User
    Join Date
    Jul 2012
    Posts
    4
    Vote Rating
    0
      0  

    Default

    Also, we actually were using a Form Panel in our app, we just had
    Code:
    scrollable: 'vertical'
    in our config which, unlike
    Code:
    scrollable: { direction: 'vertical' }
    obliterates this
    Code:
    translationMethod
    setting. That would probably be a candidate for the docs.

  6. #6
    Sencha User
    Join Date
    Apr 2012
    Posts
    5
    Vote Rating
    1
      0  

    Default

    This problem still occurs especially in horizontal view.

    Quick fix, instead of:
    Code:
    scrollable: 'vertical'
    Use:
    Code:
    scrollable: {
        direction: 'vertical'
    },

  7. #7
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    53
    Vote Rating
    2
      0  

    Default

    This problem bit me today in Sencha Touch 2.3.1. We have a form -> containers with scroll -> fields.

    translationMethod is not documented?

    This works for my container that has scroll and lies between the form and the field .

    Code:
    scrollable: {
        translatable: {
            translationMethod: 'scrollposition'
        },
        direction: 'vertical',
        directionLock: true
            }

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •