Threaded View

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. 10 Aug 2011 3:59 AM #1
    Philippe Quemener
    Philippe Quemener is offline
    Ext GWT Premium Member
    Join Date
    Jul 2010
    Posts
    17
    Vote Rating
    0
    Philippe Quemener is on a distinguished road
      0  

    Default iPhone: TabPanel is shifted wrongly when showing virtual keyboard

    iPhone: TabPanel is shifted wrongly when showing virtual keyboard


    Sencha Touch version tested:
    • 1.1.0
    • only default ext-all.css
    Platform tested against:
    • iOS 3.x
    • iOS 4
    • Android 2.3
    Description:
    • I have a TabPanel with 7 items. If I tap a TextField, the virtual keyboard appears and the panel is shifted also to the left (cf. screenshot). This happens only with iPhones with the portrait orientation. If I reduce the number of items of the tabpanel to 6 or less, it works (doesn't matter which items, just the number). But 7 or more leads to this behaviour. No problem with Android 2.3 (Galaxy i9000) or with horizontal orientation.
    Test Case:
    Code:
    var MAIN = "main";
var SETTINGS = "settings";
var panel = null;

Ext.setup({
    onReady: function() 
    {
        panel = new Ext.TabPanel(
        {
            id: MAIN,
            fullscreen: true,
            tabBar: 
            {
                dock: 'bottom',
                ui: 'light'
            },
            defaults: 
            {
                scroll: 'vertical'
            },
            dockedItems: 
            [
                {
                    xtype: 'toolbar',
                    dock: 'top',
                    title: 'Test',
                    id: 'titleBar'
                }
            ],
            
            items:
            [
                new LoginPanel(),
                new SettingsPanel(),
                new SettingsPanel(),
                new SettingsPanel(),
                new SettingsPanel(),
                new SettingsPanel(),
                new SettingsPanel()
            ]
        });
    }
});




LoginPanel = function()
{
    LoginPanel.superclass.constructor.call(this); 
};


Ext.extend(LoginPanel, Ext.form.FormPanel, 
{
    layout: 'vbox',
    scroll: 'vertical',
    id: "login",
    
    initComponent: function()
    {
        this.items = 
        [
            {
                xtype: 'fieldset',
                title: "Login",
                items:
                [
                    {
                        id: 'loginName',
                        xtype: 'textfield',
                        label: "User"
                    },
                    {
                        id: 'loginPassword',
                        xtype: 'passwordfield',
                        label: "Password"
                    }
                ]
            }
        ];
        
        LoginPanel.superclass.initComponent.call(this);
    },


    submit : function()
    {
        this.onLogin(null, null);
    },
    
    onLogin : function(relogin, response)
    {
        panel.setActiveItem(SETTINGS, 'slide');
    }
});


Ext.reg('loginPanel', LoginPanel);


SettingsPanel = function()
{
    SettingsPanel.superclass.constructor.call(this); 
};


Ext.extend(SettingsPanel, Ext.Carousel, 
{
    id : SETTINGS,
    scroll: 'vertical',
    initComponent: function()
    {
        this.items =  
        [
            new Ext.Panel({html: 'Test 1'}),
            new Ext.Panel({html: 'Test 2'})
        ];
        
        SettingsPanel.superclass.initComponent.call(this);
    }
});
    Code:
    Ext.reg('settingsPanel', SettingsPanel);

    Steps to reproduce the problem:
    • Copy the code above in a file called test.js and create a file called test.html with the following content:<!DOCTYPE html>
      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>CAESAR2Go</title>


      <!-- Sencha Touch CSS -->
      <link rel="stylesheet" href="sencha/resources/css/sencha-touch.css" type="text/css">

      <!-- Sencha Touch JS -->
      <script type="text/javascript" src="sencha/sencha-touch-debug.js"></script>

      <!-- Application JS -->
      <script type="text/javascript" src="test.js"></script>

      </head>
      <body></body>
      </html>

      Cut the items of the tabpanel to 6 or less to see the problem disappear.
    ScreenshotPS: I have no idea why I cannot correct the second code block to merge with the first one. But I think you will get the idea.

    Thank you very much for reading.
    Last edited by Philippe Quemener; 6 Oct 2011 at 11:53 PM. Reason: sometimes left and right are a hard to understand concept
    Reply With Quote Reply With Quote

Tags for this Thread