View Full Version : NumberField and Right Alignment

3 Jun 2009, 1:54 AM
usually a number field is aligned on the right.
But ExtJS seems to align it alywas on the left.

To have a right alignment I must force "style: 'text-align: right'" (according to http://extjs.com/forum/showthread.php?p=205084)

But why I need it ? It is very strange because I can see that the field use a Class "x-form-num-field" and this conatins the style 'text-align: right'

from ext-all.css

.x-small-editor .x-form-num-field {

You can see that the final results says "text-align : start"
It seems that ExtJS framework override it ..

I believe it is a bug.. but I'm sory sure..


3 Jun 2009, 2:13 AM
If it's a bug, then it's a browser bug isn't it?

3 Jun 2009, 4:20 AM
I believe it is a bug of ExtJS. I suppose (but i'm not sure) that in same way ExtJS framework change/force the text-align to "start" directly (and so it override class definition)

But I'm not an expert of ExtJS: I hope that same guru can check it

3 Jun 2009, 5:30 AM
I see that it's just not implemented in ExtJS. By default, all input fields are aligned left.

If you want align right, add your own CSS rule for

.x-form-num-field {
text-align: right;

3 Jun 2009, 5:48 AM
I'm sorry Animal,
But , have you see my screenshot ? you can see that x-form-num-field is declared. And it is a standard CSS rule distributed by ExtJS.

So, why you says
I see that it's just not implemented in ExtJS?
It seems that ExtJS implements it...

3 Jun 2009, 5:50 AM

There is no CSS rule in ext-provided CSS files to right justify ALL numeric form fields.

There is a rule provided to right justify numeric fields in a toolbar.

If you want right justified number fields, add that rule. VERY VERY Easy.

3 Jun 2009, 5:56 AM
//My short version of a number field template

var nf = new Ext.form.NumberField( {
fieldLabel: 'field Label',
style: 'text-align: right',
allowBlank: false,
width: 50

22 Aug 2012, 10:24 PM
fieldCls : 'a-form-num-field' // in configuratoion

/* add this in own common css */
text-align: right;
color: black;
font: 12px tahoma,arial,verdana,sans-serif;
margin: 0;