1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    65
    Answers
    7
    Vote Rating
    1
    warrean is on a distinguished road

      0  

    Default Unanswered: textareafield not properly rendered on android while inputting text

    Unanswered: textareafield not properly rendered on android while inputting text


    Hi,
    In my app.js I have a piece of code that sets the Viewport size when it's bad rendered on Android 4.

    However I've noticed this is a problem when inputting text, in e.g. a textareafield. I've put it in a fieldset but no luck.

    app.js
    Code:
    // if bad rendered
     Ext.Viewport.setSize('100%','100%');
    Here's what the problem looks like (this doesn't happen on IOS btw):
    bad.png



    When I leave the code out of app.js, the rendering is good:

    good.png
    Last edited by warrean; 14 Nov 2012 at 4:07 AM. Reason: clarification

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


    I'm confused. So if the rendering is bad you set the size of Ext.Viewport. But in the images you say when you leave out the code the rendering is good so I'm a little confused.
    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
    Sep 2012
    Posts
    65
    Answers
    7
    Vote Rating
    1
    warrean is on a distinguished road

      0  

    Default


    I've put it a bit confusing indeed. I'll try to explain it better :-) :


    - in app.js I've add a listener to the viewport's orientationchange that's necessary for properly rendering the app (otherwise the Viewport's height can be set too low, or too wide off the screen):
    Code:
    if (Ext.os.is.Android && Ext.os.version.gtEq('4')) {
                Ext.Viewport.on('orientationchange', function() {
                    setTimeout(function() {
                        Ext.Viewport.setSize('100%','100%');
                    }, 500);
                });
            }

    - in another screen I have a textarea (nothing special). When I tap it in Android 4.0.3 stock browser I get the bad rendering (both portrait and landscape give me this). That's why I've added a listener to the focus event of the textarea, which fixes the bad rendering:
    Code:
        onCommentFieldFocus: function(field) {
            if (Ext.os.is.Android && Ext.os.version.gtEq('4')) {
                if (Ext.Viewport.getOrientation() == 'landscape') {
                    Ext.Viewport.setSize(533, 243);
                } else {
                    Ext.Viewport.setSize(320, 456);
                }
            }
        }
    I'm on Sencha 2.1 btw, things I've come across so far:
    - If I leave out the app.js orientation-fix, the viewport is often bad rendered when changing orientation on the screen with the textarea. On other screens (without textarea's, but with dataviews) I haven't seen this happening.


    - If I remove focus from the textarea, by tapping the Android Return-button instead of tapping on another part of the viewport, I can see that although Android's keyboard has disappeared, there's still a red square around the textarea. Sometimes when I change orientation from landscape to portrait, Sencha stops registering orientationchange-event and my layout's dimension is stuck in landscape. This results sometimes in a Sencha error after a while:
    Uncaught Error: [ERROR][Ext.viewport.Android#undefined] Timeout waiting for viewport's outerHeight to change before firing orientationchange


    - On Android 4.0.3 Chrome browser, if I changed orientation while textinput activated in textarea, the keyboard would remain activated but the viewport's rendering would be bad again.
    - When I started typing, Chrome would crash.
    - When I pressed return, sometimes Chrome would crash too, but if it didn't the Viewport would reset back to good rendering (although I could see that the app.js orientation fix code had already run).


    - On iPhone the textarea has rounded corners, on Android (both Chrome and stock browser) it's a rectangle.

    I hope I've explained it better this time, otherwise I'll be glad to hear it.

Thread Participants: 1