How to set TextArea height to its content height

Question

I have an mx:TextArea and I want its height to be the same as its content height. There is nothing fancy - just a text area and text that is not editable. I need a simple and reliable way to make the control fit and show all the text without vertical scroll - something like auto resizing. Also my control's text will be set only once and will not change as it will not be editable.

<mx:TextArea id="myTextArea"
             editable="false"
             width="100%"
             verticalScrollPolicy="off" >
   <mx:text>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id lorem 
      quis ante pulvinar auctor at eget risus. Nulla facilisi. Morbi ultricies 
      dignissim lorem, quis suscipit felis ullamcorper et.
   </mx:text>
</mx:TextArea>

There is one more post here on the same topic but it is not relevant to me because the setup there is a lot more complicated as it includes styling and binding.

Possible duplicate of: http://stackoverflow.com/questions/5672402/spark-textarea-or-richtext-autosize — ggkmath, Sep 09 '13 at 01:01

score 3 · Answer 1 · answered Jun 21 '10 at 20:31

3

Use the textHeight read-only property of the TextArea, and set the height of the TextArea to be TextArea.textHeight + whatever vertical padding the TextArea uses plus the height of the top and bottom borders (examine the TextArea component and figure those out). This process should happen in a handler you add to the change event for the TextArea.

answered Jun 21 '10 at 20:31

Robusto

31,447
8
56
77

note for others: `textHeight` property not available on spark components. Instead, just set TextArea property `heightInLines={NaN}` in mxml (or =NaN in AS3). See: http://blog.flexexamples.com/2010/01/18/creating-a-vertically-auto-resizing-spark-textarea-control-in-flex-4/ – ggkmath Jul 19 '13 at 23:58

score 3 · Answer 2 · edited Oct 03 '11 at 07:17

3

Use the following code if you would like to stick with the spark text area component:

<s:TextArea 
   id="myTextArea"
   editable="false"
   width="100%"
   verticalScrollPolicy="off"
   change="myTextArea.height = myTextArea.scroller.viewport.contentHeight + 2;">
    <s:text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id lorem 
        quis ante pulvinar auctor at eget risus. Nulla facilisi. Morbi ultricies 
        dignissim lorem, quis suscipit felis ullamcorper et.
    </s:text>
</s:TextArea>

Or you can put the change handler in a function.

edited Oct 03 '11 at 07:17

Branislav Abadjimarinov

5,101
3
35
44

answered Sep 23 '11 at 16:29

stickboywarren

56
3

1

It doesn't work even in normal projects when text is set through code. I suggest adapting height on `updateComplete` event. – a.s.t.r.o May 08 '13 at 20:49

score 0 · Answer 3 · edited Dec 28 '18 at 17:36

0

I've have great success with Jack Moore's Autosize script. It's lightweight and can be implemented on all your text areas with just one line: autosize($('.MyTextAreaClass'));

edited Dec 28 '18 at 17:36

Eric Aya

69,473
35
181
253

answered Dec 28 '18 at 17:22

Michael Romrell

1,026
5
15
31

score -1 · Answer 4 · answered Jun 21 '10 at 14:44

-1

I would suggest playing with "wordWrap='true'" in addition to the scroll policy.

answered Jun 21 '10 at 14:44

phtrivier

13,047
6
48
79

No, that's not it. Word wrap will only transfer the text to a new line if it exceeds the width of the container. – Branislav Abadjimarinov Jun 21 '10 at 15:49

How to set TextArea height to its content height

4 Answers4