[AS3] How Customize comboBox

[urano]

to the forum,

This is a comboBox dropdown problem.

The top and bottom borders have been removed from the the "Up_Skin" and "Disabled_Skin" states (from the "List / Cell Renderer Skins" group)

The result is a nice list with no separating lines, but we also now have a dropdown list that has no closing border.

I am trying to style the list border to compensate for this.

After a lot of research and trying various solutions, could really use some help with this one.

Any ideas will be appreciated.

** Should mention that I'm working in FlashDevelop, and can continue to customize the comboBox in Flash and export as a SWC, or preferably, would like to use AS3 to style as needed.

[urano]

hi all,

I know this part of the boards are not as well traveled as the AS3, but if anybody can offer some help, I would greatly appreciate it.

Basically, any ideas on how to style the border of the dropdown list for a comboBox is what is needed.

thank you!!

[urano]

Putting out another request for help with this problem.

in a nutshell:

How can the list object in a comboBox be customized - specifically for borders?

Thank you!!

[urano]

OK, here is some code and more details.

I have removed all borders from the following skins in Flash via the comboBox component elements:
CellRenderer:
disableSkin
upSkin
selectedDisableSkin

This gives me a nice clean dropdown with no borders (no sides, no top, no bottom).

But I can't create a bounding box for the dropdown list (a border to include all the rows).

The comboBox uses this array which is a fixed set of data, 9 elements;
var categoryArray:Array = new Array

Here is the code where I try to style the dropdown list

inputCategoryCB = new ComboBox();
inputCategoryCB.dropdownWidth = 159;
inputCategoryCB.width = 159;
inputCategoryCB.move(159, 56);
inputCategoryCB.prompt = "Select One";
inputCategoryCB.rowCount = 9; 
inputCategoryCB.dropdown.rowHeight = 22;
inputCategoryCB.dropdown.setStyle("borderStyle" , "solid"); 
inputCategoryCB.dropdown.setStyle("borderColor" , 0xCC0000); 
inputCategoryCB.dataProvider = new DataProvider(categoryArray);
inputCategoryCB.selectedIndex = ComponentUtils.findItemIndex(inputCategoryCB, State.getState().itemCategory);
inputCategoryCB.tabIndex = 1;

your help is really needed!!!!
thank you

[urano]

SUCCESS!

I could not get the setStyle code to work in this situation.

My solutions was as follows:

1. the bottom border needs actually be part of the three skins. If it is deleted from the Cell Renderer skins, then the List_skin will not display.

2. if you want the cells to have no top or bottom borders that is accomplished by making them the same color as the background of the comboBox. In this case I made them a very light gray to show some row lines.

3. the side borders can then be set to be the same color as the List_skin element. this will display as a seamless box around the list items. The Cell Renderer skins will make up the sides and the List_skin makes the bottom.

4. I don't think the List-skin box will display if the Cell Renderer skins do not have some sort of L & R borders. i haven't tried yet.

This seems like a really ridiculous way to have to style a comBo box.

If anyone does know of a way that the List_skin border can be styled using AS3, I would still like to know.

cheers

[giobongio]

GENIOUS! I've been searching for this for a long long time.
And now it works. Thank you so much for sharing!