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> |
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();
}