Question

I have a mx.components.List component with a bunch of custom styles:

<mx:Style>
    .dropDownListStyle
    {
        border-style: solid;
        corner-radius: 4;
    }
</mx:Style>

I’m creating the list in AS:

_dropDown = new List();
...
_dropDown.styleName = "dropDownListStyle";

The List is then added as a popup with PopUpManager:

PopUpManager.addPopUp( _dropDown, this );

The problem is that the corners of the newly created popup are not rounded. I found that border-style is needed in order to get the effect, but adding this property didn’t help. I’m building the project with Flex 4.1, but the List and its parent are MX components and it’s a lot of work to migrate them to Spark.

Any ideas how can I get rounded corners? Thanks in advance!

Answer 1

List components (neither mx, nor spark) do not have the corner-radius style defined.
you should consider overriding the list component, an implementing that style, or a much easier way, put your list without any borders into a container that can set its corner-radius, and pop up that component:

/*Box, Canvas, Group...*/
.dropDownListHolderStyle { 
    corner-radius: 4;
    background-color: #FFFFFF;
    border-color: #FFFFFF;
    border-style: solid;
    border-weight: 1;
    padding-bottom: 2;
    padding-top: 2;
    padding-left: 2;
    padding-right: 2;
}
/*List*/
.dropDownListStyle {
    background-color: #FFFFFF;
}

and the component:

<s:VGroup id='_dropDownPopup' styleName='dropDownListHolderStyle' [...]>
    <s:List id='_dropDown' styleName='dropDownListStyle' [...] />
</s:VGroup>

[…]

PopUpManager.addPopUp( _dropDownPopup, this );