The following example shows how you can create fixed width buttons in a Flex ButtonBar component by setting the buttonWidth style. To revert back to variable width buttons, simply set the buttonWidth style to NaN (not a number).

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/05/creating-fixed-width-buttons-in-a-flex-buttonbar-component/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function slider_change(evt:Event):void {
                if (checkBox.selected) {
                    buttonBar.setStyle("buttonWidth", slider.value);
                } else {
                    buttonBar.setStyle("buttonWidth", NaN);
                }
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="fixed width:"
                labelPlacement="left"
                change="slider_change(event)" />

        <mx:Spacer width="50" />

        <mx:Label text="buttonWidth:" />
        <mx:HSlider id="slider"
                enabled="{checkBox.selected}"
                minimum="50"
                maximum="150"
                value="75"
                liveDragging="true"
                snapInterval="5"
                dataTipPrecision="0"
                tickInterval="10"
                change="slider_change(event)" />
    </mx:ApplicationControlBar>

    <mx:ButtonBar id="buttonBar">
        <mx:dataProvider>
            <mx:Array>
                <mx:Object label="One" />
                <mx:Object label="Two" />
                <mx:Object label="Thirteen" />
            </mx:Array>
        </mx:dataProvider>
    </mx:ButtonBar>

</mx:Application>

View source is enabled in the following example.

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

0 Responses to Creating fixed width buttons in a Flex ButtonBar component

  1. jurlan says:

    I was wondering how I can make sure that when I use the vertical layout for the ButtonBar, that the first and the last button have the same width as the middle ones and not a few pixels less ..

    Thanks

  2. peterd says:

    jurlan,

    I don’t know if I understand the question. I took a screenshot of a vertical ButtonBar, set the magnification to 600% in Photoshop and each button had the same width/height. If you’re seeing something different, you may want to file a bug at http://bugs.adobe.com/flex/ and include a simple test case to reproduce the issue and a screenshot of what it looks like on your system.

    That said, if the question was how do you remove the rounded corners on the first/last buttons, you can set the buttonStyleName and cornerRadius styles:

    <mx:Style>
        ButtonBar {
            buttonStyleName: buttonStylez;
        }
    
        .buttonStylez {
            cornerRadius: 0;
        }
    </mx:Style>
    

    For another example of setting the corner radius on a ButtonBar control, see “Setting the button corner radius in a Flex ButtonBar control”.

    Peter

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree