Hi gurus,

I have a problem with Android, SenchaTouch 1.1.1 and WebView. I have a simple form with 2 inputs. One is text and other password field. Now there are two problems with that.

If you focus the password field you get an overlay field that then floats around even if you scroll up or down it stays put with absolute positioning
If there is no password field but only 2 text fields and you press next on android virtual keyboard the focus is not moved to the next input field. This actually hold true for any number of input fields
All this is happening on android 2.1 but I think it is a more broad problem of the WebView and CSS. It works correct on IPhone in Chrome and on Android 4.X. If I remove the CSS from SenchaTouch everything works as expected. So it is not a DOM but a CSS problems. Something in the defsult CSS must cause all this. The code is:

Ext.regApplication(
{
  name: 'MyHome',
  launch: function()
  {
    this.launched = true;
    this.mainLaunch();    
  },
  mainLaunch: function()
  {
    AuthPanel =
    {
      id: 'ID_SM_LoginForm',
      csl: 'CS_SM_LoginForm',
      baseCls: 'CS_SM_LoginForm',

      xtype: 'formpanel',
      flex: 1,

      layout:
      {
        type: 'vbox',
        pack: 'center'
      },
      items:
      [
        {
          id: 'ID_Auth_UserName',
          cls: 'CS_Auth_Field',
          xtype: 'fieldset',
          title: "Username",
          items:
          [
            {
              id: 'ID_Auth_Field_UserName',              
              useClearIcon: false,
              xtype: 'textfield',
              name: 'UserName'
            }
          ]
        },
        {
          id: 'ID_Auth_Password',
          cls: 'CS_Auth_Field',
          xtype: 'fieldset',
          title: "Password",
          items:
          [
            {
              id: 'ID_Auth_Field_Password',
              xtype: 'textfield',
              useClearIcon: false,
              name: 'Password'
            }
          ]
        }
      ],
      listeners:
      {
        afterrender: function(panel)
        {
        }
      }
    };

    if (Ext.is.Phone)
    {
      AuthPanel.fullscreen = true;
    }
    else
    {
      document.body.style.background = "white";

      Ext.apply(AuthPanel,
      {
        autoRender     : true,
        floating       : true,
        modal          : true,
        centered       : true,
        hideOnMaskTap  : false,
        height         : 540,
        width          : 400
      });
    }

    MainPanel = new Ext.Panel(AuthPanel);
    MainPanel.show();
  }
});
Can anyone share any insight as to which part of the CSS is causing this. There is a lot of CSS and I have no clue where to start looking. And there is no way to switch to SenchaTouch 2