Thank you for reporting this bug. We will make it our priority to review this report.
  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

      1  

    Default autoMaximize not always hiding address bar on Android

    autoMaximize not always hiding address bar on Android


    I'm experiencing the following when setting autoMaximize to true on ST 2.1 beta 2 (but have seen this we the same app on ST 1 as well):

    Seen this on a Android 2.2 and Android 4.0.3 device as well as Android 4.0.3 simulator (those three are the only ones I tested).

    The most critical issue of the issues I'm seeing is the following:

    1. Android 2.2 and 4: Often the address bar is not going away (e.g. after view change or rotation).
    The critical part about this is that the address bar's height is cut off on the bottom of the app (the app is moved down because of the showing of the address bar), which means in case that the app has a toolbar on the bottom that toolbar is not visible anymore.
    The only way to fix this is to rotate again.

    Here are two other issues that I see on Android 4:

    2. Switching to another view, the address bar first appears for a split second and then disappears.

    3. When scrolling up (and making swipe down gesture) the address bar appears as well, but automatically disappears again after stopping the gesture.


    Again, issue #1 is rather critical, since the app I'm working on has a bottom toolbar.

    Of course, the best would be if those issues could be fixed.
    If not, I'd suggest to add those issues to the list of the autoMaximize documentation's reasons of why it is set to false by default.

    Thanks.

  2. #2
    Touch Premium Member hotdp's Avatar
    Join Date
    Nov 2010
    Location
    Denmark
    Posts
    603
    Vote Rating
    14
    hotdp will become famous soon enough

      0  

    Default


    1+ for the problem. Its also a big problem for me (1).

    Have you tried with autoMaximize:false ?
    My client tells me that the buttom is still jumping/missing sometimes. (Can not reproduce it myself)

  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


    Quote Originally Posted by hotdp View Post
    Have you tried with autoMaximize:false ?
    My client tells me that the buttom is still jumping/missing sometimes. (Can not reproduce it myself)
    We enabled autoMaximize for two reasons:
    1. The client wishes to hide the address bar (just as it was in ST 1)
    2. We also had some other layout issues e.g. after the keyboard disappeared (e.g. entering the url of the app) the viewport would not adapt to the full height of the app but stay small in height; and another issue was that the layout was not fully adapting after a rotation change (both on Android). I think autoMaximize fixes those issues with its scrollTo fix in order to hide the address bar, but which obviously causes other issues.

  4. #4
    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


    Some more information on issue #1 (address bar appearing, cutting off the bottom):

    My app has a top and bottom toolbar, in between a scrollable list.
    What happens is that sometimes when doing the swipe down or up gesture to scroll the list, it activates the viewport/page scroll of the browser (you can see the scrollbar of the whole viewport).
    After you stop the swipe and swipe again to scroll, the normal list scroll is activated again and therefore you can't scroll the viewport back into its place.

    I wonder if that has something to do with the browser zoom which the autoMaximize documentation mentions?

  5. #5
    Touch Premium Member hotdp's Avatar
    Join Date
    Nov 2010
    Location
    Denmark
    Posts
    603
    Vote Rating
    14
    hotdp will become famous soon enough

      0  

    Default


    Quote Originally Posted by Steffen Hiller View Post
    Some more information on issue #1 (address bar appearing, cutting off the bottom):

    My app has a top and bottom toolbar, in between a scrollable list.
    What happens is that sometimes when doing the swipe down or up gesture to scroll the list, it activates the viewport/page scroll of the browser (you can see the scrollbar of the whole viewport).
    After you stop the swipe and swipe again to scroll, the normal list scroll is activated again and therefore you can't scroll the viewport back into its place.

    I wonder if that has something to do with the browser zoom which the autoMaximize documentation mentions?
    1+ to that! I am happy to know that I am not the only one who has big problems with this on Android.

    I hope this will be fixed in 2.1.
    autoMaximize solves some problems but introduces some other problems.

  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


    Just as an update: For one I found out that using routes and updating the history token / url causes the address bar to show (e.g. especially to an empty route redirectTo('')).
    I had also one view (login) where after loosing the focus on the text field, the keyboard would hide but not the address bar, so I do a Ext.Viewport.maximize(); on blur. But still, there are still cases where it appears, still looking into it.

  7. #7
    Sencha User
    Join Date
    Mar 2012
    Location
    The Netherlands
    Posts
    75
    Vote Rating
    4
    SebasSP is on a distinguished road

      0  

    Default


    Hey guys,

    I was facing the same issues. I worked around most of them by listening to the window.onresize event. When that event fires, I call window.scrollTo(0, 1) in a setTimeout with a few 100 ms delay.

    Code:
    function hideAddressBar() {
        setTimeout(function() {
            window.scrollTo(0, 1);
        }, 1000); // The delay can be tweaked a bit, but is necessary.
    }
    
    window.onresize = function() {
         if (document.activeElement.tagName.toLowerCase() == 'body') {
            // Do this check to prevent scrolling when typing in a textfield
            hideAddressBar();
        }
    };
    The address bar will still show when going back in browser history, but at least it will hide again.

    Hope it helps.

  8. #8
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    11
    Vote Rating
    0
    ChrisWTI is on a distinguished road

      0  

    Default


    I have tried the
    Code:
    window.scrollTo(0, 1)
    solution in the past and it has worked, but after the latest update to Android it doesn't seem to work anymore. I have tried attaching the code to a button so I can try to execute that fix any time, instead of counting on resize events and getting a timing delay right, but it does nothing.

  9. #9
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    2
    Vote Rating
    0
    ktu is on a distinguished road

      0  

    Default


    Quote Originally Posted by Steffen Hiller View Post
    1. Android 2.2 and 4: Often the address bar is not going away (e.g. after view change or rotation).
    The critical part about this is that the address bar's height is cut off on the bottom of the app (the app is moved down because of the showing of the address bar), which means in case that the app has a toolbar on the bottom that toolbar is not visible anymore.
    The only way to fix this is to rotate again.
    I experienced very similar problem but top toolbar is missing, my code works fine in Android 4 but 2.3.3 ~ 2.3.6 keep hiding top toolbar all the time. I tried to use
    Code:
    Ext.Viewport.orientation='landscape';
    Ext.Viewport.fireEvent('orientationchange', Ext.Viewport, windowHeight, windowWidth);
    Ext.Viewport.orientation='portrait';
    Ext.Viewport.fireEvent('orientationchange', Ext.Viewport, windowWidth, windowHeight);
    This do work in Android 4 and iOS but not in 2.3 ...

    My approach to this problem as following
    Code:
    if (Ext.os.is.Android && Ext.os.version.lt(4)) {
        var windowHeight = Ext.Viewport.getWindowHeight();
         if (!this.getHeightChanged()) {
            Ext.Viewport.setHeight(windowHeight-1);
            this.setHeightChanged(true);
        } else {
            Ext.Viewport.setHeight(windowHeight);
            this.setHeightChanged(false);
        }
    }
    This won't change orientation and the but will trigger sencha resize event for sure.