I was under the assumption that someone had already figured this out, but I searched forever last night trying to find out how to move the VScrollBar to the left-hand side of a TextArea component and came up with nothing. (If I’ve overlooked something, forgive me… but at least this will help others when trying to find the answer).
After digging through the source code for a bit, I came up with the solution.
Now this has only been tested with the TextArea component and vertical scrollbar, but should work with any component that extends ScrollControlBase and should work with the horizontal scrollbar as well.
The other thing to keep in mind is that this might (and probably does) mess up the size calculations of the component… I didn’t look into that.
So without further ado, create a class that extends the TextArea component and override the protected updateDisplayList method like so:
protected override function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number ):void
{
super.updateDisplayList( unscaledWidth, unscaledHeight );
if( verticalScrollBar && verticalScrollBar.visible )
{
verticalScrollBar.x = -verticalScrollBar.width;
}
}
Dead simple.
This sets the vertical scrollbar of the TextArea component to the far left side of the component. You can change the verticalScrollBar.x value to whatever you like to position the scrollbar elsewhere. Also, you should be able to do the same check for horizontalScrollBar and change its position within the if statement to move it. Like I said, I haven’t checked that out, but it should work.
Let me know.
5 Comments
nice one – was just thinking maybe to prevent it messing up the size calculations of the component you could do the following:
protected override function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number ):void
{
super.updateDisplayList( unscaledWidth, unscaledHeight );
if( verticalScrollBar && verticalScrollBar.visible )
{
//verticalScrollBar.x = -verticalScrollBar.width;
verticalScrollBar.x = 0;
textField.x=verticalScrollBar.width;
}
}
Hi there,
Perhaps a stupid question, but i am wondering; Do you need to call that new class in your project?
Can you give a working example please?
Greets, Jacob
Jacob, I just wrote this simple program that uses the last version. It creates two text areas, on with scrollbar on right (default) and one on the left (as above).
Created a Flex Project called TextAreaControl.mxml
Then created an actionscrip file to hold my custom component.
package myComponents
{
import mx.controls.TextArea;
public class MyCustomComponentTextArea extends TextArea
{
public function MyCustomComponentTextArea()
{
super();
}
protected override function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number ):void
{
super.updateDisplayList( unscaledWidth, unscaledHeight );
if( verticalScrollBar && verticalScrollBar.visible )
{
//verticalScrollBar.x = -verticalScrollBar.width;
verticalScrollBar.x = 0;
textField.x=verticalScrollBar.width;
}
}
}
}
Hi
nice post.. I’m try to get it working with flex containers but it won’t work any options
regards
koen
Hi
First – sorry of my English, I don’t use this language.
My question :
Hou use this example?
my class like this :
package {
import mx.controls.TextArea;
public class MyClass extends TextArea {
protected override function updateDisplayList (unscaledWidth:Number, unscaledHeight:Number):void {
super.updateDisplayList (unscaledWidth, unscaledHeight);
if( verticalScrollBar && verticalScrollBar.visible ) {
verticalScrollBar.x = -verticalScrollBar.width;
}
}
}
}
n Flex :
but not ovverride position scrolbar