1. #1
    Touch Premium Member
    Join Date
    Sep 2008
    Location
    Orange County, CA, USA
    Posts
    186
    Vote Rating
    0
    Jack9 is on a distinguished road

      0  

    Default Center Tabs in TabBar

    When my tabpanel starts up, the tabs are all aligned to the left along the bottom. I've tried messing with the CSS for a little while, but have been unable to center the contents. Anyone been successful with that?

  2. #2
    Sencha User
    Join Date
    Apr 2011
    Posts
    35
    Vote Rating
    0
    realkevinroth is on a distinguished road

      0  

    Default

    The API does a pretty good job of documenting this. http://dev.sencha.com/deploy/touch/d...s=Ext.TabPanel


    Code:
    new Ext.TabPanel({
        fullscreen: true,
        ui        : 'dark',
        centered  : true,  //boolean, set to true to center tabs.
        items: [
            {
                title: 'Tab 1',
                html : '1',
                cls  : 'card1'
            },
            {
                title: 'Tab 2',
                html : '2',
                cls  : 'card2'
            },
            {
                title: 'Tab 3',
                html : '3',
                cls  : 'card3'
            }
        ]
    });

  3. #3
    Touch Premium Member
    Join Date
    Sep 2008
    Location
    Orange County, CA, USA
    Posts
    186
    Vote Rating
    0
    Jack9 is on a distinguished road

      0  

    Default Er

    This does not work (check it out)
    Code:
    <html> 
        <head> 
            <link rel="stylesheet" href="sencha/resources/css/sencha-touch.css" type="text/css"> 
            <script type="text/javascript" src="sencha/sencha-touch.js"></script> 
    <script type="text/javascript">
    Ext.setup({
        onReady: function() {
            new Ext.TabPanel({
                renderTo:Ext.getBody(),
                fullscreen: true,
                ui        : 'dark',
                centered  : true,  //boolean, set to true to center tabs.
                items: [
                    {
                        title: 'Tab 1',
                        html : '1',
                        cls  : 'card1'
                    },
                    {
                        title: 'Tab 2',
                        html : '2',
                        cls  : 'card2'
                    },
                    {
                        title: 'Tab 3',
                        html : '3',
                        cls  : 'card3'
                    }
                ]
            });
        }
    });
    </script> 
    </head> 
    <body/> 
    </html>
    Also tried...
    Code:
            var cTabBar = new Ext.TabBar({centered:true,dock:'bottom'});
            new Ext.TabPanel({
                tabBar:cTabBar,
                fullscreen: true,
                ui        : 'dark',
                centered  : true,  //boolean, set to true to center tabs.
                items: [
                    {
                        title: 'Tab 1',
                        html : '1',
                        cls  : 'card1'
                    },
                    {
                        title: 'Tab 2',
                        html : '2',
                        cls  : 'card2'
                    },
                    {
                        title: 'Tab 3',
                        html : '3',
                        cls  : 'card3'
                    }
                ]
            });
    No good. So has anyone had success with this using CSS?

  4. #4
    Sencha User
    Join Date
    Jun 2011
    Posts
    24
    Vote Rating
    0
    digil is on a distinguished road

      0  

    Default

    Give this a try. The key is that you have to specify the pack : center inside the layout inside the tabBar. I had to dig through the DOM and the source to find this, but it looks like it works.

    PHP Code:
    <html>
    <
    head>
        <
    link rel="stylesheet" href="css/sencha-touch.css" type="text/css">
        <
    script type="text/javascript" src="js/sencha-touch-debug.js"></script>
        <script type="text/javascript">
            Ext.setup({
                onReady: function() {
                    new Ext.TabPanel({
                        renderTo:Ext.getBody(),
                        fullscreen: true,
                        ui        : 'dark',
                        tabBar : {
                            layout : {
                                pack : 'center'
                            }
                        },
                        items: [
                            {
                                title: 'Tab 1',
                                html : '1',
                                cls  : 'card1'
                            },
                            {
                                title: 'Tab 2',
                                html : '2',
                                cls  : 'card2'
                            },
                            {
                                title: 'Tab 3',
                                html : '3',
                                cls  : 'card3'
                            },
                            {
                                xtype : 'spacer'
                            }
                        ]
                    });
                }
            });
        </script>
    </head>
    <body/>
    </html> 

  5. #5
    Sencha User
    Join Date
    Jun 2011
    Posts
    24
    Vote Rating
    0
    digil is on a distinguished road

      0  

    Default

    kevin, the API says: Center the Component. The component in this case is the entire TabPanel object, not the Tabs inside the TabBar inside the TabPanel.

  6. #6
    Sencha User
    Join Date
    Aug 2011
    Posts
    7
    Vote Rating
    2
    MattCobb is on a distinguished road

      0  

    Post Setting the tabBar layout worked for me:

    tabBar: { layout: { pack: 'center' } }

  7. #7
    Sencha User
    Join Date
    Oct 2011
    Location
    Pakistan
    Posts
    229
    Vote Rating
    1
    umr.ashrf is on a distinguished road

      0  

    Default

    NOTE: Disregard this post. Mistakenly posted in Sencha Touch forum.

    Code:
    tabBar : {
        layout : {
            pack : 'center'
        }
    }
    doesn't work for me on ExtJS 4.1.1a GPL