CODEWITHSUNDEEP
cssapache-flexflex3
Georgi Hristozov
Georgi Hristozov

Reputation: 4289

How to properly set corner-radius of a MX List and get rounded corners?

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!

Upvotes: 4

Views: 1294

Answers (2)

rekaszeru
rekaszeru

Reputation: 19220

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

Upvotes: 2

Tomasz Stanczak
Tomasz Stanczak

Reputation: 13164

I used cornerRadius style property not corner-radius, perhaps you have misspelled it? But I did only Spark so it might not work in your context.

Upvotes: 0

Related Questions