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.
11 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
Have you been able to move a Datagrid’s vertical scrollbar to the left side without issue? When using the method you listed above it moves the scrollbar but not the header for the scrollbar, nor does it move the other columns over. The scrollbar basically sits on top of the first rows data in a Datagrid. Any help would be great. Thank you.
Thank you. I was able to move custom scrollbar skin for my list.
This didn’t work for me. I tried it on List in Flex 4.
But I have found another solution with layoutDirection property.
http://igaidaichuk.blogspot.com/2011/03/reposition-scrollbars-in-flex-4.html
I have the same problem, did you find any solution?
Thanks in advance!
I was able to “move” the left scroll bar off the data grid by adding the following, however now I am having problems that the vertical scroll bar disappears when I scroll horizontally all the way to the right (so it’s off the screen) and then scroll back again…
protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
super.updateDisplayList( unscaledWidth, unscaledHeight );
if( this.verticalScrollBar && this.verticalScrollBar.visible ) {
this.verticalScrollBar.x = 0;
this.x = verticalScrollBar.width;
this.verticalScrollBar.move(-verticalScrollBar.width, 0);
this.verticalScrollBar.height = this.verticalScrollBar.height + this.headerHeight;
}
}
Hi,
Has anybody has any joy trying to get this to work for a container such as a panel? I am trying to get the horizontal scroll bar to appear at the top of the container rather than the bottom .