ExtJS 4. How to make displayfield multiline to fit its content?

Question

I want displayfield to span multiple lines, when there is some large content inside. I tried many configurations and css-styling, but to no avail. If there is no quick solution, could you please advise me another component, that I could use instead of displayfield.

Answer 1

assign width and height config explicitly and if it is not enough use maxWidth and maxHeight configs

check out :

http://jsfiddle.net/acteon/p46v3/

{
            xtype: 'displayfield',
            value: 'line 1 aasdasdasdasdasdasd line 2 ad asd asd asd asd asdasd',
            fieldLabel: 'multiLineField',
            width : '20%'
       }

Answer 2

Oh, I used textarea with readOnly set to true. It works almost as I want.

Answer 3

This answer is for ExtJS 4.2 - not sure about later versions.

The sass definition file at ext/packages/ext-theme-neutral/sass/src/form/field/Display.scss has a height definition, using $form-field-height. If this height is removed, then the field will expand/contract based on the content within.