TextArea's height property doesn't work (ExtJS)

Question

Here, I created the panel with vbox layout and one TextArea item:

        Ext.create('Ext.form.Panel', {
            width        : 400,
            height       : 300,
            layout       :
            {
                type: 'vbox',
                align: 'stretch'
            },
            renderTo     : Ext.getBody(),
            items        :
            [{
                xtype      : 'textareafield',
                height     : 55        
            }]
        });

After render textareafields height property is equal to 55, but rendered components height isn't equal to 55.

Here is the fiddle: https://fiddle.sencha.com/#view/editor&fiddle/1ulh

What extjs version are you using and which theme ? need to set same in fiddle — Tejas
Exactly which height you want to set -> whole component height(including field label) or ONLY input-el height ? I will make necessary fix accordingly — Tejas
@Tejas1991 Height of the whole textareafield component must be equal to 55. — Makha

Tejas Tejas · Accepted Answer · 2017-04-26T12:11:46

@Maxa: Sencha is specifying default min-height of text field as 60px.If you inspect element for only el part then you will get as below :

.x-form-text-default.x-form-textarea {
line-height: 15px;
min-height: 60px;
}

The possible solution is you will need to override this class/property in your own app's css file.Then it will get reflect.Please check this solution and reply.

TextArea's height property doesn't work (ExtJS)

2 Answers