Flex Examples
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.
<?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.
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.
Share
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
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
buttonStyleNameandcornerRadiusstyles:<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