Wait! Looks like we don't have enough information to add this to bug database. Please follow this template bug format.
  1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    20
    Vote Rating
    0
    Nepol is on a distinguished road

      0  

    Default App resizes to half screen on Android on Portrait, No TabBar on Landscape

    App resizes to half screen on Android on Portrait, No TabBar on Landscape


    REQUIRED INFORMATION

    Ext version tested:
    • Sencha Touch 2
    Browser versions tested against:
    • Native Android 2.2 and above, also any broswer
    Description & Steps to reproduce the problem::
    • Ok I'll explain but the attachment show the error pretty well: SOMETIMES (a lot) when I turn the device from Portrait to Landscape the TabBar disappears, when I turn back to Portrait the App loads only in Half-screen, the other half staying white. Turning back to Landscape won't solve the problem, only reloading the App.
    The result that was expected:
    • That TabBar is showed in Landscape and Portrait loads in full screen
    The result that occurs instead:
    • There is no TabBar in Landscape and Portrait loads in half screen
    Test Case:Screenshot:
    ANDROID-HALF.jpg


    Additional CSS used:
    • Included in ZIP with source code
    Operating System:
    • Android 2.2 and above, native app and broswer
    Facts to consider:
    • Happens like 50% of the time on native App
    • 20-30% of the time on any Android browser.
    • Tested on Android 2.2, 2.3, 3.x and 4.x (several handsets, one tablet)
    • NEVER happens on first load
    • The app needs to be reloaded to solve the problem
    • Happens in every tab, no pattern whatsoever, is very randomly. You can use the App for a while and never see it the same as you can see it from the beginning.
    • The error show more often when I load the app and turn the device before I touch the app, I mean when there has been NO interaction with the finger and the app.
    • Also happens less often when I load the app in Landscape
    I'll appreciate any help, thanks!

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


    Do you have a test case that we can reproduce it with? We may need code to look into the issue.
    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 User
    Join Date
    Mar 2012
    Posts
    20
    Vote Rating
    0
    Nepol is on a distinguished road

      0  

    Default


    I zipped the project here: www.mrclick.mx/app/olimpus7.zip, my entire code is in the app.js file. Thanks a lot!

  4. #4
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    18
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Can you turn off the autoMaximize option on the Viewport to see if that's the culprit? We've seen inconsistency on Android devices that may be what you are experiencing.

    Sencha Inc

    Jamie Avins

    @jamieavins

  5. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    20
    Vote Rating
    0
    Nepol is on a distinguished road

      0  

    Default


    I've turned it on trying to solve the problem actually because I read it in some post, but the problem persist wether its on or off

  6. #6
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    18
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    I can reproduce this with the orientation change during loading. I do have problems with the CSS in your zip file though.

    Sencha Inc

    Jamie Avins

    @jamieavins

  7. #7
    Sencha User
    Join Date
    Mar 2012
    Posts
    20
    Vote Rating
    0
    Nepol is on a distinguished road

      0  

    Default


    Hmmm, I modified my CSS using Compass Compile only, this is in my SASS file:

    $base-color: #467526;$active-color: #6C9804;
    $tabs-dark: darken($base-color, 10%);
    $tabs-dark-active-color: saturate($active-color, 40%);
    $tabs-bottom-active-gradient: 'recessed';
    $toolbar-icon-size: 1.2em;

    @import 'sencha-touch/default/all';
    @include sencha-panel;
    @include sencha-buttons;
    @include sencha-sheet;
    @include sencha-picker;
    @include sencha-tabs;
    @include sencha-toolbar;
    //@include sencha-toolbar-forms;
    //@include sencha-indexbar;
    @include sencha-list;
    @include sencha-layout;
    //@include sencha-carousel;
    @include sencha-form;
    @include sencha-msgbox;
    @include sencha-loading-spinner;
    @include pictos-iconmask('calendar');
    @include pictos-iconmask('refresh5');
    @include pictos-iconmask('note2');
    @include pictos-iconmask('check2');
    @include pictos-iconmask('delete1');
    @include pictos-iconmask('left');
    @include pictos-iconmask('home2');
    @include pictos-iconmask('settings9');
    @include pictos-iconmask('chat');

    html, body {height: 100%;}
    .tweet-wrapper {
    h2 {
    font-weight: bold;
    padding-bottom: 3px;
    text-align:left;
    }
    img {
    border-radius: 5px; float: left;
    -moz-box-shadow: 0 0 5px #000;
    -webkit-box-shadow: 0 0 5px #000;
    box-shadow: 0 0 5px #000;
    }
    .tweet {
    text-align:left;
    font-size: 70%;
    margin-left: 60px;
    min-height: 50px;
    p{padding-top:4px !important;}
    }
    .posted {
    float: right;
    color:#999;
    }
    }
    .x-list-paging-msg{
    text-align:center;
    padding-bottom:15px;
    font-weight:bold;
    }
    .x-segmentedbutton .x-button .x-button-icon.x-icon-mask {
    width: 0.9em;
    height: 0.9em;
    -webkit-mask-size: 0.9em;
    margin-right:5px;
    }
    .error{
    padding:20px;
    margin: auto;
    max-width: 300px;
    text-align:center;
    img{ margin-bottom:10px; }
    }
    .social{
    div div div{
    text-align:center;
    }
    a{
    margin: 8px 10px;
    display: inline-block;
    width: 48px;
    height: 48px;
    background-repeat:none;
    background-position: 0 0;
    }
    p{ padding-top: 8px;}
    .social-buttons{
    box-shadow: inset 0 -2px 5px #B3B3B3;
    -moz-box-shadow: inset 0 -2px 5px #B3B3B3;
    -webkit-box-shadow: inset 0 -2px 5px #B3B3B3;
    }
    }
    .home{
    background-color: #FFF;
    text-align:center;
    #intro-text{
    font-size:16px;
    padding-bottom:18px;
    }

    h1, h2, h3, h4, h5, h6{
    margin: 0 0 10px 0;
    }

    h1{ font-size: 24px; line-height:120%;}
    #header{
    h1{ font-weight:bolder; }
    padding: 20px;
    background-image: url(../images/mobile_back.jpg);
    background-repeat: repeat-x;
    background-position:left bottom;
    text-shadow: black 0.1em 0.1em 0.3em;
    color:#FFF;
    div {
    font-size:17px;
    padding-bottom:18px;
    }
    }
    .content{
    border-bottom: 2px solid #E3E3E3;
    padding:15px 20px;
    }
    #redes{
    p{ font-size:15px; }
    a{
    margin: 10px;
    display: inline-block;
    width: 112px;
    height: 126px;
    background-repeat:none;
    background-position: 0 0;
    }
    }
    #features{
    border: 0;
    th{ width: 60px; }

    td, th{
    padding:5px 15px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #CCCCCC;
    font-size:15px;
    line-height: 120%;
    color: #666;
    text-shadow: 1px 1px white;
    text-align: left;
    height:80px;
    vertical-align: middle;
    }
    }
    .grey{
    background-color: #DFDFDF;
    border-top-width: 2px;
    border-top-style: solid;
    border-top-color: #B4B4B4;
    h1{ color: #666666; }
    }
    #patrocinadores a{
    margin: 10px;
    display: inline-block;
    width: 170px;
    height: 142px;
    background-repeat:none;
    background-position: 0 0;
    }
    #mrapp{
    color:#666;
    font-size:75%;
    line-height:90%;
    text-decoration:none;
    }
    }
    .x-html{ padding:0; }
    .x-html table{
    td, th{
    border-top: 1px solid #DEDEDE;
    padding:10px;
    text-align:center;
    }
    td { background-color:#FFFFFF; }
    .left { text-align: left; }
    .title {
    font-size:120%;
    background-color:#DEDEDE;
    border-bottom: 1px #FFF;
    }
    }
    .main-table{
    td, th{ font-size:90%; padding:8px;}
    }

    Could something here be holding the problem?

  8. #8
    Sencha User
    Join Date
    Mar 2012
    Posts
    20
    Vote Rating
    0
    Nepol is on a distinguished road

      0  

    Default


    Do you need additional information? I edited the original post using the bug template and included the ZIP I provided you. Thanks for all your help and your quick responses!

  9. #9
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Austria
    Posts
    2
    Vote Rating
    0
    stefan.mayer.netconomy is on a distinguished road

      0  

    Default Dirty Fix

    Dirty Fix


    I have the same problem and it seems like Android is sometimes reporting the old height and width values (from the previous orientation). This happens only on Android 4 with my app (at least on the tested devices). As a quick fix I changed the doFireOrientationChangeEvent function in the viewport/Android.js files of the Sencha Touch source code. I added a delay of 200ms to the waitUntil function call. Maybe this helps with your problem as well.
    Code:
    doFireOrientationChangeEvent: function() {
            var eventController = arguments[arguments.length - 1],
                delay = 50;
    
    
            if (Ext.os.version.gtEq('4')) {
                delay = 200;
            }
    
            ...
    
            this.waitUntil(function() {
                return this.getWindowOuterHeight() !== this.windowOuterHeight;
            }, function() {
                this.windowOuterHeight = this.getWindowOuterHeight();
                this.updateSize();
    
    
                eventController.firingArguments[2] = this.windowWidth;
                eventController.firingArguments[3] = this.windowHeight;
                eventController.resume();
                this.orientationChanging = false;
    
    
            }, function() {
                //<debug error>
                Ext.Logger.error("Timeout waiting for viewport's outerHeight to change before firing orientationchange", this);
                //</debug>
            }, delay);
    
    ...

  10. #10
    Sencha User
    Join Date
    Mar 2012
    Posts
    20
    Vote Rating
    0
    Nepol is on a distinguished road

      0  

    Default


    Quote Originally Posted by stefan.mayer.netconomy View Post
    I have the same problem and it seems like Android is sometimes reporting the old height and width values (from the previous orientation). This happens only on Android 4 with my app (at least on the tested devices). As a quick fix I changed the doFireOrientationChangeEvent function in the viewport/Android.js files of the Sencha Touch source code. I added a delay of 200ms to the waitUntil function call. Maybe this helps with your problem as well.
    Code:
    doFireOrientationChangeEvent: function() {
            var eventController = arguments[arguments.length - 1],
                delay = 50;
    
    
            if (Ext.os.version.gtEq('4')) {
                delay = 200;
            }
    
            ...
    
            this.waitUntil(function() {
                return this.getWindowOuterHeight() !== this.windowOuterHeight;
            }, function() {
                this.windowOuterHeight = this.getWindowOuterHeight();
                this.updateSize();
    
    
                eventController.firingArguments[2] = this.windowWidth;
                eventController.firingArguments[3] = this.windowHeight;
                eventController.resume();
                this.orientationChanging = false;
    
    
            }, function() {
                //<debug error>
                Ext.Logger.error("Timeout waiting for viewport's outerHeight to change before firing orientationchange", this);
                //</debug>
            }, delay);
    
    ...
    Thanks a lot I'm going to test it. I'm not crazy about modifying the Sencha's code but as you stated is a Dirty Fix, and it's better than no fix at all. Question do you happen to know if modifying the source code will affect anything when I build the production App? I mean will the changes apply? Thanks again