Aligning labels in a Flex PopUpButton control’s pop up menu

The following example shows you how you can align the labels in a PopUpButton control’s pop up menu in Flex by setting the popUpStyleName and textAlign styles

<? xml version="1.0" ?>
<!--  http://blog.flexexamples.com/2008/01/18/aligning-labels-in-a-flex-popupbutton-controls-pop-up-menu/  -->
< mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"
        layout ="vertical"
        verticalAlign ="top"
        backgroundColor ="white" >

     < mx:Script >
         <![CDATA[
            import mx.controls.Menu;
            import mx.events.MenuEvent;

            [Bindable]
            private var menu:Menu;

            private function initMenu():void {
                menu = new Menu();
                menu.dataProvider = arr;
            }
         ]]>
     </ mx:Script >

     < mx:Array  id ="arr" >
         < mx:Object  label ="Button"   />
         < mx:Object  label ="ButtonBar"   />
         < mx:Object  label ="ColorPicker"   />
         < mx:Object  label ="ComboBox"   />
     </ mx:Array >

     < mx:Style >
        .myCustomPopUpStyleName {
           textAlign: left;
        }
     </ mx:Style >

     < mx:ApplicationControlBar  dock ="true" >
         < mx:PopUpButton  id ="popUpButton"
                label ="Select a control…"
                popUp ="{menu}"
                popUpStyleName ="myCustomPopUpStyleName"
                preinitialize ="initMenu();"   />
     </ mx:ApplicationControlBar >

</ mx:Application >

Or, if a dynamic example is a bit more your style…

<? xml version="1.0" ?>
<!--  http://blog.flexexamples.com/2008/01/18/aligning-labels-in-a-flex-popupbutton-controls-pop-up-menu/  -->
< mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"
        layout ="vertical"
        verticalAlign ="top"
        backgroundColor ="white" >

     < mx:Script >
         <![CDATA[
            import mx.events.ItemClickEvent;
            import mx.controls.Menu;
            import mx.events.MenuEvent;

            [Bindable]
            private var menu:Menu;

            private function initMenu():void {
                menu = new Menu();
                menu.dataProvider = arr;
            }

            private function toggleButtonBar_itemClick(evt:ItemClickEvent):void {
                var obj:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".myCustomPopUpStyleName");
                obj.setStyle("textAlign", evt.label);
                popUpButton.open();
            }
         ]]>
     </ mx:Script >

     < mx:Array  id ="arr" >
         < mx:Object  label ="Button"   />
         < mx:Object  label ="ButtonBar"   />
         < mx:Object  label ="ColorPicker"   />
         < mx:Object  label ="ComboBox"   />
     </ mx:Array >

     < mx:Style >
        .myCustomPopUpStyleName {
           textAlign: left;
        }
     </ mx:Style >

     < mx:ApplicationControlBar  dock ="true" >
         < mx:Form  styleName ="plain" >
             < mx:FormItem  label ="textAlign:" >
                 < mx:ToggleButtonBar  id ="toggleButtonBar"
                        selectedIndex ="0"
                        itemClick ="toggleButtonBar_itemClick(event);" >
                     < mx:dataProvider >
                         < mx:Array >
                             < mx:Object  label ="left"   />
                             < mx:Object  label ="center"   />
                             < mx:Object  label ="right"   />
                         </ mx:Array >
                     </ mx:dataProvider >
                 </ mx:ToggleButtonBar >
             </ mx:FormItem >
         </ mx:Form >
     </ mx:ApplicationControlBar >

     < mx:PopUpButton  id ="popUpButton"
            label ="Select a control"
            popUp ="{menu}"
            popUpStyleName ="myCustomPopUpStyleName"
            preinitialize ="initMenu();"   />

</ mx:Application >