Left Sided Flex Canvas ScrollBar

Rob

Published: December 16, 2009Posted in: Adobe FlexTags:

I was just working on a project where I needed to reposition the vertical scrollbar of a canvas from the right side to the left side. Here’s a quick hack:

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"  styleName="canvasPage" x="350" y="0" width="650" height="100%" >
 
 
<mx:Script>
	<![CDATA[
 
		public override function validateDisplayList( ):void{
			super.validateDisplayList( );
 
			if( verticalScrollBar && verticalScrollBar.visible ){
				verticalScrollBar.x = 0;
			}	
 
		}
 
	]]>
</mx:Script>
 
</mx:Canvas>

Alternatively, you could set verticalScrollBar.x = -verticalScrollBar.width; to move the scrollBar outside the left edge of the canvas but keep in mind that if you set the canvas position to x=0 in the application, the verticalScrollBar will be drawn outside the viewable area.

3 Comments

Seb

Posted April 8, 2010 at 8:29 AM

great tip!!
Big help
amarnath

Posted May 27, 2011 at 7:36 AM

How can I change the VerticalScrollBar or HorizontalScrollBar height which appears in Canvas?
I did try that using style, but not working
Rob

Posted May 27, 2011 at 5:30 PM

@amarnath, can you provide me with some example source code of what you’re trying to achieve and I’ll take a look?

I just tried the following in one of my existing sites (same one from the image in this post header):

public override function validateDisplayList( ):void { super.validateDisplayList( );
if( verticalScrollBar && verticalScrollBar.visible ){ verticalScrollBar.x = -verticalScrollBar.width; verticalScrollBar.y = 40; } }

and it shifted the scrollbar down just as I expected.