1. #1
    Sencha User
    Join Date
    Dec 2011
    Location
    White Rock, BC Canada
    Posts
    161
    Answers
    11
    Vote Rating
    0
    WagsMax is on a distinguished road

      0  

    Default Unanswered: Keyboard/orientation change/panel resizing issue on Android device

    Unanswered: Keyboard/orientation change/panel resizing issue on Android device


    I found this issue on this forum, but no working resolution to it yet.

    From a portrait orientation, after a device rotation to landscape on a form window with the keyboard visible, a device rotation back to portrait causes the bottom area of the screen to go blue, and become unavailable for use. Follow these steps (must be on a real Android device) to achieve the result:

    -start in portrait mode
    -go to a panel in app that will pop up the virtual keyboard
    -tap into the text field, keyboard appears
    -rotate to landscape
    -hide the keyboard
    -rotate to portrait
    -panel does not resize to fill screen

    tried running this code manually after the issue occurs, and it does not fix it. It does change the panel height, but the blue space of death still appears at the bottom of the screen.

    Code:
    var panel = this.getInnerItems()[this.getInnerItems().length - 1];
    panel.setHeight(519);
    Ext.repaint();
    There may be some event that is not being trapped by Sencha framework??? Because when the order of the above steps is slightly changed (steps 3 and 4 reversed), the screen resizes properly:

    -start in portrait mode
    -go to a panel in app that will pop up the virtual keyboard
    -rotate to landscape
    -tap into the text field, keyboard appears
    -hide the keyboard
    -rotate to portrait
    -panel DOES resize to fill screen

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


    This sounds like a browser issue. Using a remote debugger, did you inspect the DOM to see the sizing of the Ext.Viewport element?
    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
    Dec 2011
    Location
    White Rock, BC Canada
    Posts
    161
    Answers
    11
    Vote Rating
    0
    WagsMax is on a distinguished road

      0  

    Default


    I didn't use a remote debugger, but I created an alert to display Viewport and Panel sizes.
    When the app is first started (on a Samsung Nexus):
    Viewport 360x567, Panel 360x519
    After the keyboard issue:
    Viewport 360x567, Panel 360x287

    So it seems that the Viewport stays the same, it is the size of the Panel inside the NavigationView that is the issue. Sometimes, if I rotate the device a number of times, a message must be sent to the Panel, because it sometimes fixes itself (i.e. goes back to the full size of the Viewport).

    Code used to display info:
    Code:
        onBtnInfoTap: function(container, newActiveItem, oldActiveItem, options) {
        	var panel = this.getInnerItems()[this.getInnerItems().length - 1];
        	Alert(
        		"Viewport:" + Ext.Viewport.getWindowWidth() + "," + Ext.Viewport.getWindowHeight() + "<br>" +
        		"Panel:" + panel.element.getWidth() + "," + panel.element.getHeight()
        		);
        	//panel.element.setHeight(519);
        	panel.setHeight(519);
        	Ext.repaint();
        }
    I found the Ext.repaint() as a suggestion in another thread related to this issue, but it doesn't fix anything.

Thread Participants: 1