[2 - 2.1B2] Viewport is not expanding to full height after focus on address bar

[Steffen Hiller]

1. Open any ST 2.x app (haven't tested with ST 1) on an Android 4(.0.3) device, e.g. the kitchensink:
http://dev.sencha.com/deploy/touch/e...ink/index.html

Update: This issue is easy reproducable on Android 2 as well, see post #7 (http://www.sencha.com/forum/showthre...l=1#post883318)

2. Tap on the url in the address bar to select it and trigger the display of the keyboard. The keyboard will stay being displayed since the url is selected.

3. Hit the reload button

4. After the reload is done (make sure the keyboard is still shown) tap somewhere within the app to dismiss the keyboard

Actual Result:
The viewport isn't expanded to its full height, only ~half of the app is visible. Space of keyboard is kept blank.
This also happens for apps with viewport: autoMaximize: true.
I can reproduce this from ST 2.0 till 2.1 beta 2.

Sencha Touch 2.0:
Screenshot_2012-08-27-22-14-34.jpg

Sencha Touch 2.1 Beta 2:
Screenshot_2012-08-27-22-20-29.jpg

[mitchellsimoens]

Is this with the native browser or Chrome? I don't have a 4.0.x device, my 4.1 Nexus 7 works like a charm but it's also using Chrome.

[Steffen Hiller]

Native browser. Don't have a 4.1 device, so not sure if it's happening there on the native browser.
I have such keyboard space issues also on Android 2 and in other cases, but this case was at least easily reproducible for me.
Thanks.

[mitchellsimoens]

Native browser. Don't have a 4.1 device, so not sure if it's happening there on the native browser.
I have such keyboard space issues also on Android 2 and in other cases, but this case was at least easily reproducible for me.
Thanks.

Think we all understand the native browser isn't the best but Chrome on Android is looking a lot better. We can still take a look at what we can do in this case.

[Steffen Hiller]

Ok yes, thanks. I will concentrate on finding a reproducible case on Android 2.x where we're seeing similar keyboard space issues.

[Steffen Hiller]

It seems that the reason for this behavior is that because the keyboard is shown since the beginning, Viewport's "stretchHeights" is set to the height that the viewport has while the keyboard is shown.
Once set, stretchHeights isn't reset (because of the "if (!height)" condition) throughout the app session.

I guess this is fixable, e.g. through the "resize" event that is fired when the keyboard is hidden.

On a side note,
it's a bit hard to fully understand the Default and Android viewport code since it isn't really documented and one of the more complex classes of ST.

[Steffen Hiller]

Just want to add that the exact same issue can be easily reproduced on Android 2.2 and 2.3.6 as well.

Focus on address bar while app is loading
Screen Shot 2012-09-06 at 11.45.05 AM.png

Hit 'back' button to dismiss address bar and keyboard. You'll see that the app viewport is cut off in the middle:
Screen Shot 2012-09-06 at 11.46.10 AM.png

Maybe this scenario isn't a common one, but it may help fixing this issue in general since my users have been seeing this issue throughout the app.

Like mentioned above, after dismissing the keyboard, the browser is firing a 'resize' event, but the viewport's height isn't changing.
I think the problem is that Ext.Viewport.stretchHeights is only set once at the beginning when the app is initializing. Maybe this needs to be more flexible and be updated if the new window height after a resize event is bigger than the saved stretchHeights for portrait mode.

[Steffen Hiller]

For the record, here's an override that fixes this for me.
Pretty messy, just as the original viewport code is, too. :-P

The issue is basically that the app initiates and sets the viewport height before Android completely hides the keyboard.
My code is checking on each browser viewport resize event if the new height is taller than before, if so, reset the app's viewport height.

Ext.define('App.override.viewport.Android', {
    override: 'Ext.viewport.Android',
    
    lastHeight: 0,
    
    orientationChanged: false,
    
    onResize: function() {
        var oldWidth = this.windowWidth,
            oldHeight = this.windowHeight,
            width = this.getWindowWidth(),
            height = this.getWindowHeight(),
            currentOrientation = this.getOrientation(),
            newOrientation = this.determineOrientation();

        // Determine orientation change via resize. BOTH width AND height much change, otherwise
        // this is a keyboard popping up.
        if ((oldWidth !== width && oldHeight !== height) && currentOrientation !== newOrientation) {
            this.fireOrientationChangeEvent(newOrientation, currentOrientation);
        }
        
        else {
            if (!this.orientationChanged && !this.runningFix && 
                (!this.lastHeight || this.getWindowHeight() > this.lastHeight)) {
                this.doFix(currentOrientation);
            }
        }
    },
    
    doFix: function (currentOrientation) {
        var portrait = this.PORTRAIT,
            landscape = this.LANDSCAPE,
            correctOrientation = this.determineOrientation();
        
        this.runningFix = true;
        this.stretchHeights = {};
        
        this.maximize();
        
        if (this.orientation != correctOrientation) {
            if (this.orientation == landscape) {
                // alert('fix stretchHeights');
                this.stretchHeights[portrait] = this.stretchHeights[landscape];
                this.stretchHeights[landscape] = undefined;
            } else {
                this.stretchHeights[landscape] = this.stretchHeights[portrait];
                this.stretchHeights[portrait] = undefined;
            }
        
            this.orientation = correctOrientation;
        }
        
        this.lastHeight = this.getWindowHeight();
        
        Ext.defer(function () {
            this.runningFix = false;
        }, 100, this);
    },
    
    fireOrientationChangeEvent: function () {
        this.callOverridden(arguments);
        
        this.orientationChanged = true;
    }
});

[jweber]

FYI, I also reported this here.

[bstrappazzon]

Hi Steffen,

Thanks for this tips, unfortunately I'm not able to make it work.

Actually it seems that the custom Viewport does not override the android viewport.
I'm not sure to understand how to override the viewport in sencha.

What I do is

• adding your custom code in the file myApp/view/CustomViewport.js
• adding this to my app.js :

Ext.application({
    name: 'myApp',
    requires: [
           'Ext.MessageBox'
           'Ext.NavigationView',
           'myApp.view.CustomViewport'
    ],
    views: [
            'home.Home',
            'CustomViewport'
    ],
...
});

I have still the keyboard issue as you called it.
Can you explain to me how to use this custom Viewport

Thank you very much anyway

Benjamin