7 Replies Latest reply on Jun 22, 2010 4:14 PM by rtalton

    Horizontal Gap in MenuBar

    upshotvideo Level 1

      Hi

      I've looked high and low but can't figure out how to create custom space between the menuItems in a MenuBar. I'd think that horizontalGap would be a property but it's not.

      Thanks for any help.

        • 1. Re: Horizontal Gap in MenuBar
          rtalton Level 4

          Take a look at the menuStyleName property of the MenuBar. You can set padding properties here.

          You set these styles using CSS syntax, like "paddingBottom: 5;" and the menu bar will add 5 pixels under each menu item.

          • 2. Re: Horizontal Gap in MenuBar
            upshotvideo Level 1

            Sorry,

            I was a little to quick to mark this as answered.  This doesnt add padding to each menu item , but to the menuBar itself. I'm trying to add spacing between each menuItem in a horizontal menuBar.  paddingRight is not working for each item.

            • 3. Re: Horizontal Gap in MenuBar
              rtalton Level 4

              That's odd. can you post the relevant CSS code you are using?

              • 4. Re: Horizontal Gap in MenuBar
                upshotvideo Level 1

                I just whipped this up for an example.  It's similar to what I'm doing in my application.    

                 

                     <mx:Style>
                        .menuStyle{
                            paddingRight:20;
                        }
                    </mx:Style>
                    <mx:MenuBar id="myMenuBar" labelField="@label" menuStyleName="menuStyle">
                        <mx:XMLList>
                            <menuitem label="MenuItem A">
                                <menuitem label="SubMenuItem A-1" enabled="false"/>
                                <menuitem label="SubMenuItem A-2"/>
                            </menuitem>
                            <menuitem label="MenuItem B"/>
                            <menuitem label="MenuItem C"/>
                            <menuitem label="MenuItem D">
                                <menuitem label="SubMenuItem D-1"
                                          type="radio" groupName="one"/>
                                <menuitem label="SubMenuItem D-2"
                                          type="radio" groupName="one"
                                          selected="true"/>
                                <menuitem label="SubMenuItem D-3"
                                          type="radio" groupName="one"/>
                            </menuitem>
                        </mx:XMLList>
                    </mx:MenuBar>

                • 5. Re: Horizontal Gap in MenuBar
                  upshotvideo Level 1

                  Weird there is no way to accomplish this.  I still have not found a solution for the padding.

                  • 6. Re: Horizontal Gap in MenuBar
                    rtalton Level 4

                    Just had time to look at your code. It is working perfectly.

                    Just change "paddingRight" to "paddingBottom".

                     

                    HTH

                     

                    edit: Or are you trying to add space between the top-level menu bar items?

                    • 7. Re: Horizontal Gap in MenuBar
                      rtalton Level 4

                      If you are trying to add width to the top-level menubar items, you could do this.

                       

                      <mx:Script>

                      <![CDATA[

                       

                       

                      import mx.controls.menuClasses.MenuBarItem;

                       

                       

                      private const MENU_ITEM_PADDING:Number = 25;

                       

                       

                      private function resizeMenuItems():void{

                       

                      for each(var item:MenuBarItem in myMenuBar.menuBarItems){

                      item.width += MENU_ITEM_PADDING;

                      }

                      }

                      ]]>

                      </mx:Script>