Expandable Text Area

I had an issue recently where there was a standard form item, with a textInput as the entry component. The problem was that a single line was not large enough for the client to enter in the details that they required. Using a text area would be my next logical choice however because of certain real estate restrictions I wanted to keep as many form elements visible on the screen at the one time.

Hence the Expandable Text area, a hybrid of the single lined TextInput and the TextArea. Where typing and removing text would re-size the input component accordingly, and setting a text value would expand the component to cater to the text size.

It’s a fairly simple component with the overridden measure method doing most of the work.


Below in the measure command we utilize both the viewMetrics to determine the number or lines and then the measuredHeight of the TextArea


There is also a listener and handler for the “textChanged” event that is dispatched from the extended TextArea. This handler invalidates the size of the component if the number of lines in the textField has been modified. I also had to sets the variable called useLineCount to determine whether the textFields.numLines attribute should be used. As when the component is first initialized with text, the textFields layout is not yet completely set thus returning an incorrect numLines value.


And the last piece is the updateDisplayList which sets the actual size of the textField based on the number of lines and the components unscaledWidth. It also sets the explicitWidth of the component if it results in a NaN. This occurs if the component’s width is determined by a percentage or layout constraints.

There it is, unfortunately it’s written with the Flex 3 SDK although I’ll eventually port it to 4. It’s a hybrid between the two text inputs which will enable the user to concentrate on data entry without having to worry about scroll bars and what they’d typed 50 characters ago.

One thought on “Expandable Text Area

  1. Schultz,After looking thgrouh the default s:Panel skin, I’m not surprised this no longer works. It looks like the default PanelSkin.mxml file is explicitly setting the textAlign style to start (which looks like a change between the Flex 4.0 and Flex 4.1 SDKs wherein Flex 4.1 added better bi-di text support). Here’s the offending code snippet in question from Flex 4.1 and Flex Hero beta:Since that textAlign=”start” is hard coded into the skin file, you won’t be able to override it using CSS like you could in Flex 4.0. Now in Flex 4.1 and later you’ll need to explicitly set the textAlign style using ActionScript, or you’ll need to create a custom skin which overrides that textAlign value.But basically I don’t think that it is a bug in the Flex SDK that it no longer works.Peter

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">