Flex Examples
The following example shows how you can control the horizontal and vertical gaps between buttons in a ButtonBar control in Flex by setting the verticalGap and horizontalGap styles.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/08/setting-horizontal-and-vertical-gaps-between-buttons-in-a-flex-buttonbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal"
verticalAlign="middle"
backgroundColor="white">
<mx:Array id="arr">
<mx:Object label="The" />
<mx:Object label="quick" />
<mx:Object label="brown" />
<mx:Object label="fox" />
</mx:Array>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="verticalGap:" direction="horizontal">
<mx:HSlider id="slider"
minimum="-2"
maximum="10"
value="0"
liveDragging="true"
snapInterval="1"
tickInterval="1" />
<mx:Label text="{slider.value}" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:ButtonBar id="buttonBar"
dataProvider="{arr}"
verticalGap="{slider.value}"
direction="vertical" />
</mx:Application>
View source is enabled in the following example.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/08/setting-horizontal-and-vertical-gaps-between-buttons-in-a-flex-buttonbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal"
verticalAlign="middle"
backgroundColor="white">
<mx:Array id="arr">
<mx:Object label="The" />
<mx:Object label="quick" />
<mx:Object label="brown" />
<mx:Object label="fox" />
</mx:Array>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="horizontalGap:" direction="horizontal">
<mx:HSlider id="slider"
minimum="-2"
maximum="10"
value="0"
liveDragging="true"
snapInterval="1"
tickInterval="1" />
<mx:Label text="{slider.value}" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:ButtonBar id="buttonBar"
dataProvider="{arr}"
horizontalGap="{slider.value}"
direction="horizontal" />
</mx:Application>
View source is enabled in the following example.
You could also set the horizontalGap or verticalGap style in an external .CSS file or <mx:Style /> block, as seen in the following snippet:
<mx:Style>
ButtonBar {
horizontalGap: 16;
}
</mx:Style>
Or, you can set the horizontalGap or verticalGap style using ActionScript, as seen in the following snippet:
<mx:Script>
<![CDATA[
private function init():void {
buttonBar.setStyle("horizontalGap", 16);
}
]]>
</mx:Script>
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
this was very helpful, thanks! i always forget that gaps are styles, not properties :-)
Just spent a few hours trying to adjust the padding of the individual buttons in a button bar inline in actionscript. This works, but it ain’t that pretty:
var buttonStyleObj:CSSStyleDeclaration = new CSSStyleDeclaration("buttonStyleObj"); buttonStyleObj.setStyle("paddingRight", 4); buttonStyleObj.setStyle("paddingLeft", 4); StyleManager.setStyleDeclaration(".buttonStyle", buttonStyleObj, true); var buttonBar:ButtonBar = new ButtonBar(); buttonBar.setStyle("buttonStyleName", "buttonStyle");Thank you for posting your solution, I was searching for that exact thing. I ended up translating your code into a style declaration and applying it to my button bar:
.buttonStyle { paddingLeft: 4; paddingRight: 4; } ...Lets try that again…
.buttonStyle { paddingLeft: 4; paddingRight: 4; }
...
My kingdom for a preview button!
.buttonStyle { paddingLeft: 4; paddingRight: 4; }Oh well…code is not going to show properly. All I did is create a style definition and set the buttonStyleName of the button bar to the style.
How to customize a button bar in such a way that, I can give horizontal gap between only two buttons?