Propaganda Oculta
miƩrcoles, julio 27, 2011
How to fix the height of the scroll thumb in Flex
If you decide to use a VScrollBar or HScrollBar directly, you'll notice that the scroll thumb is always tiny, no matter the amount of scrolling that is available. The root of the problem is that the ScrollThumb class has an explicitMinHeight of 10, but the way to change that is not very straightforward. Here's the easiest solution I found:

import mx.controls.VScrollBar;
import mx.core.mx_internal;

public class MyVScrollBar extends mx.controls.VScrollBar
public function MyVScrollBar()

public override function set pageSize( value:Number ):void {
super.pageSize = value;


public override function setScrollProperties(
pageScrollSize:Number = 0
):void {

private function updateThumbHeight():void {
if ( mx_internal::scrollThumb ) {
mx_internal::scrollThumb.explicitMinHeight = 40;

So, we're extending the VScrollBar, and using the weird mx_internal namespace to access its scrollThumb property, which is an instance of ScrollThumb class. Now it's just a matter of setting explicitMinHeight whenever one of the scroll properties is changed. I only show pageSize, but the other properties in setScrollProperties() should also be overridden.

This gives you a larger thumb, which is nice, but we can do better. A dynamically-sized thumb is simply as big as the scrollbar itself minus the scrollable ammount, and if we add a simple Math.max() to prevent the thumb from getting too tiny (again), we're set! Change the last function to this:

    private function updateThumbHeight():void {
if ( mx_internal::scrollThumb ) {
mx_internal::scrollThumb.explicitMinHeight =
Math.max( height - maxScrollPosition, 40 );

It's important to note that explicitMinHeight does a lot of work for us, adjusting the rest of the scroll properties as necessary. Other height-related properties do not work as well.

The original solution was taken from Nathan's answer to a JustLogged question, but sadly it's not considered the "accepted" answer; you have to see the "other" answers to find Nathan's.

About mx_internal, it's actually a member modifier, like private or public. All the properties you see in the Flex debugger with a yellow rhombus are mx_internal properties. For a more in-depth look, check out When and how to use mx_internal in Flex at Code Of Doom.

Etiquetas: ,

Comments: Publicar un comentario

<< Home
Personal sounding board and public memory.


diciembre 2004 / enero 2005 / febrero 2005 / marzo 2005 / noviembre 2005 / diciembre 2005 / febrero 2006 / marzo 2006 / abril 2006 / julio 2007 / agosto 2007 / noviembre 2007 / septiembre 2010 / octubre 2010 / noviembre 2010 / enero 2011 / junio 2011 / julio 2011 / diciembre 2011 / marzo 2012 / junio 2012 / agosto 2012 / septiembre 2012 /

Powered by Blogger