Center Tabs in TabBar

**Jack9** · 6 Jun 2011 12:41 PM

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?

**realkevinroth** · 6 Jun 2011 7:12 PM

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'
        }
    ]
});

**Jack9** · 17 Jun 2011 10:41 AM

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?

**digil** · 17 Jun 2011 11:57 AM

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>

**digil** · 17 Jun 2011 12:00 PM

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.

**MattCobb** · 1 Sep 2011 10:10 PM

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

**umr.ashrf** · 9 Dec 2012 6:51 AM

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

Center Tabs in TabBar

Thread Tools

Search Thread

Display

Center Tabs in TabBar

Center Tabs in TabBar

Er

Er

Setting the tabBar layout worked for me:

Setting the tabBar layout worked for me: