ExtJS 4.2.0: Vertical alignment for textfield

Question

I am unable to get a textfield I have created in ExtJS to align vertically to the bottom.

The problem is that no matter what I try - it stays vertically aligned to center inside the textfield (the textfield itself is stretched). It is a little hard to explain so I have created a JSFiddle to demonstrate my problem:

http://jsfiddle.net/w3gfy/

CSS Code:

.exx-valign-bottom { vertical-align: bottom; }

ExtJS Code:

items: [
    {
        xtype: 'textfield',
        flex: 1,
        itemId: 'teQuantityField',
        fieldCls: 'x-form-field exx-valign-bottom',
        fieldStyle: 'vertical-align:bottom;',
        readOnlyCls: 'x-form-readonly exx-valign-bottom',
        cls: 'exx-valign-bottom',
        labelAlign: 'top',
        labelSeparator: ' ',
        emptyCls: 'x-form-empty-field exx-valign-bottom',
        emptyText: 'Align me'
     }
]

As you can see I have tried placing it literally everywhere without any luck. Does anyone have any idea how to do this properly?

Edit:

I tried adding this container (see JSFiddle). Is this the right way to do it? Or is there another way?

http://jsfiddle.net/w3gfy/2/

Not sure if you can, because the "typable" area is only the center part, so any kind of alignment doesn't really help. You'll see if you style it with ::-webkit-input-placeholder {} and set padding-top it already begins to go out of view. — Evan Trimboli
I did try earlier with adding another field with flex: 1, then onFocus set focus to the field at the bottom. But in my experience that is a bad workaround as it always seem to cause problems in the future. Is that the only solution to this problem or is there another way that I am not seeing? — GauteR

Mir Gulam Sarwar Mir Gulam Sarwar · Accepted Answer · 2013-06-10T08:12:47

not sure what do you want but for complex alignment i use

style:{marginLeft:'__px',marginRight:'__px',marginTop:'__px',marginBottom:'__px'}//use Which marginProperty you want and use numeric values in the"__"

ExtJS 4.2.0: Vertical alignment for textfield

2 Answers