View Full Version : How do you get UITextField to increase its viewable area(height) insted of scrolling?

11-02-2007, 01:11 AM
I have a UITextField (flex wrapper of flash.text.TextField) inside a canvas.

When the number of lines of text increases beyond the viewable area of the TextField it goes into scroll mode (this is normal), but I dont want the control to scroll when the size of the text goes beyond the viewable area of the UITextField.

Insted I want the UITextField to get longer and increase its viewable area (increase its height) which will increase the height of the canvas in which it is contained and the vertical scroll bar for the canvas will display.

In other words I want the scrolling action of the canvas in which the UITextField is contained to be the scroll window. I have other components in this canvas which sit below and above the textfield and I need them to stay in position relative to certain lines of text.

When I scroll the canvas all the components will move as one and everything stays in position relative to each other but if the textfield scrolls independanty by itself insted of increasing its height then the lines of text inside the UITextField will move out of position relative to other components in the canvas.

If possible I would also like to set a maximum size for the UITextField where it will not grow anymore and the user as a result of the UITextField not growing anymore can not add anymore text.

I searched through all the propertys but there is no "disablescroll" kind of property to use and I'm kinda stumped on how to proceed.

Any advice would be most welcome


corn flex
11-02-2007, 11:53 AM
Have you looked at ScrollRect?

11-02-2007, 12:00 PM
You might be using TextArea component. I don't know whether it works with TextArea.

If you use Text component, it should work:

<mx:Text x="0" y="0" text="Text" width="400"/>

11-02-2007, 04:55 PM
Here's my attempt.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

<mx:Panel x="210" y="134" width="250" height="299" layout="absolute" id="panelBase">
<mx:VBox x="13.25" y="10" width="203.5" height="227">
<mx:TextArea id="myTextControl" verticalScrollPolicy="off" width="100" height="16" color="0xffffff" backgroundColor="0x000000"/>
<mx:Button id="submit" label="Submit" click="buttonHandler(event)"/>

import mx.events.ScrollEvent;

public function init():void
myTextControl.addEventListener(ScrollEvent.SCROLL, onScroll);

public function onScroll(event:ScrollEvent):void
var myCtr:TextArea = TextArea(event.target);

if (myCtr.height > 200){
trace("MAX size met");

myCtr.height += 20; /* increase height of control */

public function buttonHandler(event:Event):void
trace("button clicked");


11-02-2007, 06:09 PM
sorry to let u in on this secret, but UITextField doesn't work.

but if u want to try and use it even though it doesn't work you can do.

.autoSize = TextFieldAutoSize.LEFT; //CENTER //RIGHT

11-03-2007, 10:41 AM
ok heres what I have so far.

It sort of works but there are some problems but I think I will do it eventually.

txt.addEventListener(TextEvent.TEXT_INPUT, checkTxtScroll);

private function checkTxtScroll(ev:Event):void {
txt.scrollV=1; //prevents the text from scrolling (sort of), needed for If statement below
if(txt.bottomScrollV < txt.numLines){
txt.scrollRect=new Rectangle(txt.x,txt.y,txt.width,txt.height+5);


this function will keep calling itself until bottomScrollV (which denotes the bottom most visible line in the scroll Rect) is => numLines. You have to keep setting txt.scrollV=1 other wise it will screw everything up.

The canvas scroll bar dosent move to reflect the current position of the carret in the text so you get the impression that its not working but I can see the scroll bar growing for the canvas. I should be able to move the canvas scroll position to the correct scrollV depending on where the carret is in the text using carretIndex and this.verticalScrollPosition.

Ill have another play with it tommrow.

I know UITextField is not perfect, there is a bug where using percentWidth and percentHeight does not work but I dont have an alternative as propertys like carretIndex and other fine textcontrol features that I need are not available in the flex text controls.

Thanks for the replys so far.

11-04-2007, 04:02 PM
I just found that setting the canvas verticalScrollPosition using carretIndex is harder than I imagined as the verticalScrollPosition is using pixels and carretIndex uses some sort of index.

I tried the following to get the y position of the carret but the function getCharBoundaries keeps returning null.

this.verticalScrollPosition = txt.getCharBoundaries(txt.caretIndex).y

getCharBoundaries returns a rectangle which denotes the bounding box of the character. It could be returning null because there is no character at the index where the carret is placed. The documentation does not say if this is true or not.

Im not entierly sure if the carretIndex is the same as the character index which is what getCharBoundaries requires.

any suggestions?

corn flex
11-19-2007, 05:06 PM
sorry to let u in on this secret, but UITextField doesn't work.

but if u want to try and use it even though it doesn't work you can do.

.autoSize = TextFieldAutoSize.LEFT; //CENTER //RIGHT

This thread is a couple of weeks old, but since basic information on flex is often sorely lacking (e.g. a search on UITextField in this forum yields only eight entries) I thought it worthwhile to pass along info as I discover it.

When using UITextField in Flex, you have to access it on the right events or you may not get valid results. The textField member of mx:Text is protected in all liklihood for this very reason. On the resize event, textField.getLineIndexOfChar and textField.getLineLength both work, but textField.getCharBoundaries does not. However, by the time the render event occurs, getCharBoundaries is working.

So anyway, FWIW.

Not exactly correct. getCharBoundaries can be called on resize event, but return value should be checked for null, because on the first resize event, it actually returns null.

07-03-2009, 09:05 PM
getCharBoundaries often returns null or random results - see here:


I've stopped using it as I've tried a number of recommended workarounds and none of them are working for me. I just don't trust it anymore!