You found a bug! We've classified it as TOUCH-3364 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Ext JS Premium Member Steffen Hiller's Avatar
    Join Date
    Mar 2008
    Posts
    770
    Vote Rating
    28
    Steffen Hiller will become famous soon enough Steffen Hiller will become famous soon enough

      0  

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

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


    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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,754
    Vote Rating
    827
    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


    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.
    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
    Ext JS Premium Member Steffen Hiller's Avatar
    Join Date
    Mar 2008
    Posts
    770
    Vote Rating
    28
    Steffen Hiller will become famous soon enough Steffen Hiller will become famous soon enough

      0  

    Default


    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.

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,754
    Vote Rating
    827
    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


    Quote Originally Posted by Steffen Hiller View Post
    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.
    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.

  5. #5
    Ext JS Premium Member Steffen Hiller's Avatar
    Join Date
    Mar 2008
    Posts
    770
    Vote Rating
    28
    Steffen Hiller will become famous soon enough Steffen Hiller will become famous soon enough

      0  

    Default


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

  6. #6
    Ext JS Premium Member Steffen Hiller's Avatar
    Join Date
    Mar 2008
    Posts
    770
    Vote Rating
    28
    Steffen Hiller will become famous soon enough Steffen Hiller will become famous soon enough

      0  

    Default


    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.

  7. #7
    Ext JS Premium Member Steffen Hiller's Avatar
    Join Date
    Mar 2008
    Posts
    770
    Vote Rating
    28
    Steffen Hiller will become famous soon enough Steffen Hiller will become famous soon enough

      0  

    Default


    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.

  8. #8
    Ext JS Premium Member Steffen Hiller's Avatar
    Join Date
    Mar 2008
    Posts
    770
    Vote Rating
    28
    Steffen Hiller will become famous soon enough Steffen Hiller will become famous soon enough

      0  

    Default


    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.

    Code:
    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;
        }
    });

  9. #9
    Sencha User
    Join Date
    Mar 2007
    Posts
    411
    Vote Rating
    17
    jweber will become famous soon enough

      0  

    Default


    FYI, I also reported this here.

  10. #10
    Sencha User
    Join Date
    Feb 2012
    Posts
    20
    Vote Rating
    3
    bstrappazzon is on a distinguished road

      0  

    Default


    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 :
    Code:
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."