Setting a fixed button width on a Spark ButtonBar control in Flex 4

ButtonBar (Spark),

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>

7 thoughts on “Setting a fixed button width on a Spark ButtonBar control in Flex 4”

  3. 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! :)

  4. If you have a height set in ButtonBar, the HorizontalLayout seems to ignore it when creating the buttons. Any way around this?

    1. 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

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

  6. /**
    * @private
    */
    override protected function initializationComplete():void
    {
    useChromeColor = true;
    // Default size of buttons in ButtonBar control
    this.height=25;
    this.width=120;
    super.initializationComplete();
    }

Comments are closed.