How to set the angular radius of the MX list and get rounded corners?

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 create a list in AS:

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

Then the list is added as a popup using PopUpManager:

 PopUpManager.addPopUp( _dropDown, this ); 

The problem is that the corners of the newly created popup are not rounded. I found that the border style is necessary in order to get the effect, but adding this property did not help. I am creating a project using Flex 4.1, but List and its parent components are MX, and there is a lot of work to port them to Spark.

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

Answer 1

List items (neither mx nor spark) have a specific radius angle. you should consider redefining the list component, implementing this style, or a much simpler way, placing your list without any boundaries in a container that can set its radius of the corner and display this 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 component:

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

[...]

 PopUpManager.addPopUp( _dropDownPopup, this ); 

Answer 2

I used the cornerRadius style property, not the radius-angle, maybe you have a typo? But I only did Spark so that it doesn't work in your context.