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.
{ 2 comments… read them below or add one }
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