Results 1 to 3 of 3

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

  1. #1
    Sencha User
    Join Date
    Dec 2011
    Location
    White Rock, BC Canada
    Posts
    167
    Answers
    12
    Vote Rating
    0
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3931
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Location
    White Rock, BC Canada
    Posts
    167
    Answers
    12
    Vote Rating
    0
      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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •