ListBox Component Customization

programming flash
1

I have a list box which has been customized with the following code.

The problem is that when I dont have enough records there is a tiny grey square that appears in the lower right hand corner that I dont want. How do I get rid of it. If I could set the scroller to not be visible unless the content is greater that the height of the listcomponent it would be great. Is this possible.

here is the screenshot of what is happening

http://www.nothingbad.com/Picture_1.jpg


_global.styles.jdaScroller = new mx.styles.CSSStyleDeclaration();
_global.styles.jdaScroller.backgroundColor = "0x000000";
_global.styles.jdaScroller.color = "0xffffff";
_global.styles.jdaScroller.embedFonts = "2Stone Sans";
_global.styles.jdaScroller.fontFamily = "2Stone Sans";
_global.styles.jdaScroller.fontSize = 14;
_global.styles.jdaScroller.fontWeight = "bold";
_global.styles.jdaScroller.rollOverColor = "0x999999";
_global.styles.jdaScroller.textRollOverColor = "0xcccccc";
_global.styles.jdaScroller.textSelectedColor = "0x000000";
_global.styles.jdaScroller.borderStyle = "none";
_global.styles.jdaScroller.selectionColor = "0xFFFFFF";
//
my_list.setStyle("styleName", "jdaScroller");
//
my_list.addItem({label:"play", data:"option 1"});
my_list.addItem({label:"stop", data:"option 2"});
my_list.addItem({label:"play", data:"option 3"});
my_list.addItem({label:"stop", data:"option 4"});
my_list.addItem({label:"play", data:"option 1"});
my_list.addItem({label:"stop", data:"option 2"});
my_list.addItem({label:"play", data:"option 3"});
my_list.addItem({label:"stop", data:"option 4"});
my_list.addItem({label:"play", data:"option 1"});
my_list.addItem({label:"stop", data:"option 2"});
my_list.addItem({label:"play", data:"option 3"});
my_list.addItem({label:"stop", data:"option 4"});
//
function doIt() {
    my_list.setSize(200, 200);
}
doIt();