How to set TextArea height to its content height
Solution 1
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
.
Solution 2
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.
Branislav Abadjimarinov
Software developer and enthusiast working in the field of virtualization, web technologies and artificial intelligence.
Updated on June 14, 2022Comments
-
Branislav Abadjimarinov about 2 years
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.