View Full Version : TabPanel title textAlign

10 Feb 2012, 3:13 PM
How do i get the text in a tab to be LEFT aligned and not centered ?

The config option for tabs 'textAlign' does not seem to 'drip down' or 'percolate up' when trying to configure the tabpanel using items list.

{ xtype: 'tabpanel',
minTabWidth: 150,
tabWidth: 150,
resizeTabs: true,
enableTabScroll: true,
plain: true,
items: [{
title: 'Tab 1',
textAlign: 'left',
html: 'blah'

'Tab 1' is centered in the tab - I'm trying to get it left justified.



11 Feb 2012, 1:07 AM
I have 4.0.2a and ext-all-debug.js doesnt seem to have textAlign or setTextAlign in the code!

13 Feb 2012, 5:26 AM
Why not simply do it in css?
Inspect with FireFox exact element and modify.

13 Feb 2012, 8:18 AM
Element has a style of 'x-tab-center' :-S

That's the problem. There's no way of setting it to 'x-tab-left' or 'x-tab-right' using config options. Docs suggest that a 'Tab' itself has the config option of 'textAlign'. That should be honoured for configuring the alignment of text in the tab.


13 Feb 2012, 9:13 AM
The section 'Controlling Tabs' suggests that you should be able to do it using tabConfig:


However, there's no guarantee that it'll work even if you do get the CSS class to change. The textAlign option is inherited from the button class so the CSS rules may not have been implemented for tabs. It should be fairly simple to write them though.

6 Aug 2013, 8:18 PM
Just for references. Here is an open bug.