Results 1 to 5 of 5

Thread: iPhone: TabPanel is shifted wrongly when showing virtual keyboard

Threaded View

Previous Post Previous Post   Next Post Next Post
    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext GWT Premium Member
    Join Date
    Jul 2010
    Posts
    17
    Vote Rating
    0
      0  

    Default 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.

    Screenshot

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

Tags for this Thread

Posting Permissions

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