PDA

View Full Version : altering text alignment on buttons



gskluzacek
26 Feb 2010, 2:05 PM
Thought this would be simple, but it turns out I can't figure this one out... probably doesn't help that my knowledge of CSS is limited.

I have a button and instead of having the text centered, I'd like it left or right justified.

I've checked the API and there is no textAlign: config item for a button, and I've also tried using the style: config item to set the text alignment on the button but it doesn't work.

style: {'text-align': 'left', color: '#E00'},
It appears another a css rule is overriding the style: config item.

Looking at the html/style in firebug, the style: config item that I am supplying is getting applied to the table element that is the root container for the button, but if I look at the button element itself the text-align attribute is coming from the .x-btn-mc rule applied to the containing td element.

so how can I provide the text-align value that I want just for this one button?

Thanks for your help in advanced.
-- Greg

d4rk knight
17 Aug 2010, 8:50 AM
I've the same problem... did you solved it?. thanks

gskluzacek
17 Aug 2010, 12:22 PM
I've the same problem... did you solved it?. thanks

Can't remember it was so long ago... I will have to try and remember where I was trying to do that and take a look at the code, but problems is I'm not sure I kept the code either

Condor
18 Aug 2010, 3:06 AM
The style has to be applied to the inner <button> element instead of the outer <table>.

The easiest way to do this is by giving the button a cls (e.g. cls:'my-cls') and use this class in a css rule:

.my-cls button {text-align: left; color: #e00;}

d4rk knight
18 Aug 2010, 8:37 AM
Thanks Condor. Using the cls attribute works great.
gskluzacek thanks too.

DaniloMalzao
4 Nov 2014, 12:01 PM
I know this is a old thread but the answer wasn't helped me.


With this css the button text will align left even inside a window.

Extjs Usage

{
xtype: 'button',
text: 'left align text',
cls: "x-btn-left"
}

Css code:

.x-btn-left .x-btn-mc, .x-btn-left button {
text-align: left;
}