Alignment of menu items in MenuBar

[leviathan]

Hello:

This might be a dumb question, but I've scroured google and haven't found an answer. How can you change the alignment of menu items within a MenuBar? I have a MenuBar containing a few items (code below) but they always align to the left side of the bar. Is there a way to make then align to the right? Any help would be greatly appreciated!

MXML:

Code:

<mx:MenuBar id="menuBar" labelField="@label" height="35" top="-1" left="282" right="0" styleName="mainMenu">
<mx:filters>
        <mx:DropShadowFilter alpha="0.6" angle="5" distance="25"/>
      </mx:filters>
      <mx:XMLList>
         <menuitem label="Item 1">
          <menuitem label="Sub item 1" />
       </menuitem>
       <menuitem label="Item 2">
           
       </menuitem>
       <menuitem label="Item 3">
           <menuitem label="Sub 2">
           
           </menuitem>
       </menuitem>
   </mx:XMLList>
</mx:MenuBar>

      

[prashant]

I don't know what do you mean by menu alignment but there are following css properties in menuBAr
backgroundAlpha="1.0"
    backgroundColor
    backgroundSkin
    borderColor
    color
    cornerRadius
    disabledColor
    fillAlphas
    fillColors
    focusAlpha
    focusRoundedCorners
    fontAntiAliasType
    fontFamily
    fontGridFitType
    fontSharpness
    fontSize
    fontStyle
    fontThickness
    fontWeight
    highlightAlphas
    itemDownSkin
    itemOverSkin
    itemUpSkin
    leading
    rollOverColor
    selectionColor
    textAlign
    textDecoration
    textIndent read this it may help you ..http://livedocs.adobe.com/flex/201/langref/mx/controls/MenuBar.html

[leviathan]

To be a bit more clear, what I mean by alignment is the placement if the menu items within the menu bar.

For example, if the menu is 500 pixels wide, but there are only two menu items on the bar, the 2 items will always be placed all the way to the far left of the menu bar, leaving empty space at the right. I would like to know whether there is any way to make the items align to the right, so that the empty space is on the left.

None of the CSS properties seem to address this, at least not that I can see. If anyone has any ideas, I would really appreciate it! 

[flexy]

Have you tried applying the style textAlign="center" ?

[leviathan]

Yes, flexy, I did try that, using both CSS and putting it directly into the MXML. Resulting code and screenshot are attached. There's got to be a way to do it, right? Do I have to make a custom component that extend MenuBar?

<mx:MenuBar id="menuBar" labelField="@label" height="35" top="10" left="10" right="10" textAlign="center">
   <mx:filters>
           <mx:DropShadowFilter alpha="0.6" angle="5" distance="25"/>
         </mx:filters>
         <mx:XMLList>
               <menuitem label="Item 1">
                  <menuitem label="Sub item 1" />
             </menuitem>
             <menuitem label="Item 2">
                 
             </menuitem>
             <menuitem label="Item 3">
                 <menuitem label="Sub 2">
                    
                 </menuitem>
             </menuitem>
         </mx:XMLList>
      </mx:MenuBar>

[flexy]

Hi, if that style property doesn't do it, you're going to have to extend MenuBar and override the method that handles the positioning of menu items. Looks as though it doesn't natively support any alignment other than left (i.e. it directly extends UIComponent, so isn't afforded all the nice layout properties that Containers have) 

[leviathan]

Ahh - that makes sense. I'm surprised this doesn't come up more often - I found virtually no other discussion of it online. Guess I've got some digging through source code to do. Thanks for the help!

[flexy]

Hey no probs, shame there isn't a quick fix, but please let us know how you get on with extending it 

[leviathan]

Just finished, actually. Attached is my quick and dirty extension, AlignableMenuBar. It has an extra property itemAlign which can be set to "left", "right" or "center". Default is left. The only problem is that it still displays as left aligned no matter what in flex builder design mode, but displays with the correct alignment at run time. I don't have time to fix the design mode display right now, but if anyone has any reason to do it, please improve on my work and post.

Also, for future reference, the textAlign property affects the alignment of the sub-items of each menu, so that if you have three items in one menu, you can control how they align within the drop-down rectangle.

Thanks for the help, guys!

[flexy]

Great! I tend not to work in design mode at all, but I know that it does have limitations around what it can render... From what I gather, it will only work with extended MXML components, not those extended with ActionScript.