Reposition ScrollBars in Flex Components
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.
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
xmlns:MyComp="myComponents.*">
width="300" height="100" text="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."/>
width="300" height="100" text="One of the more interesting developments in the world of Flex is the entry of ILOG Elixir. ILOG is one of the top component companies in the world and specialized in visualization components. They have been quietly working on a great component set called Elixir which includes many of the top most requested components."/>
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;
}
}
}
}