textareafield not properly rendered on android while inputting text

[warrean]

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

// 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

[mitchellsimoens]

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.

[warrean]

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):

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:

    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.