Flex Examples
The following example shows how you can set a fixed button width on a Spark ButtonBar control in Flex 4 by creating a custom HorizontalLayout and setting the columnWidth and variableColumnWidth properties.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/12/10/setting-a-fixed-button-width-on-a-spark-buttonbar-control-in-flex-4/ --> <s:Application name="Spark_ButtonBar_layout_columnWidth_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:ButtonBar id="bBar" horizontalCenter="0" verticalCenter="0"> <s:layout> <s:HorizontalLayout gap="-1" columnWidth="80" variableColumnWidth="false" /> </s:layout> <s:dataProvider> <s:ArrayList source="[Red,Halo Orange,Yellow,Halo Green,Halo Blue,A,The quick brown fox]" /> </s:dataProvider> </s:ButtonBar> </s:Application>
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
Great tutorial, thank you for helping me understand this.
Flex is great!
How about setting up button width in vertical layout?
hi, not particularly related to this post but just wanted to say thank you to you for this wonderful blog.. i have stumbled upon this so many times when searching for flex, and most of the time i have found it to be a great resource and help! thanks again! :)
If you have a height set in ButtonBar, the HorizontalLayout seems to ignore it when creating the buttons. Any way around this?
It seems the buttonHeight previously available to us in is not valid in 4.0/4.1 Also button-height is ‘ignored’ as a style.
I guess you could create custom skins for ButtonBar(Frist, Middle, Last)Skins dictating your required height…. or you could do a cheap scaleX, scaleY :P
I advice to use Skin for ButtonBar and specify button size in ButtonBar’s Button skins like this:
/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
// Default size of buttons in ButtonBar control
this.height=25;
this.width=120;
super.initializationComplete();
}
/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
// Default size of buttons in ButtonBar control
this.height=25;
this.width=120;
super.initializationComplete();
}