# ListBox Component Customization

**URL:** <https://forum.kirupa.com/t/listbox-component-customization/190667>\
**Category:** flash\
**Created:** [June 13, 2006, 7:57pm UTC](https://forum.kirupa.com/t/listbox-component-customization/190667 "2006-06-13T19:57:00Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Grimshaw](https://avatars.discourse-cdn.com/v4/letter/g/439d5e/32.png) [@Grimshaw](https://forum.kirupa.com/u/Grimshaw)\
**Post date:** [June 13, 2006, 7:57pm UTC](https://forum.kirupa.com/t/listbox-component-customization/190667/1 "2006-06-13T19:57:00Z")

</div>

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](http://www.nothingbad.com/Picture_1.jpg)

```auto

_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();

```