19 September 2010

Align Buttons in Flex Spark layout container

Let's say Buttons inside same group in your Flex app have different text (which is almost always the case). Code may look something like this:

<?xml version="1.0" encoding="utf-8"?>
<s:Application

xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">

<s:Group top="10" left="10">
<s:layout>
<s:VerticalLayout />
</s:layout>
<s:Button label="first button" />
<s:Button label="second button" />
<s:Button label="third button" />
<s:Button label="forth button" />
</s:Group>
</s:Application>


Now, your Buttons have different sizes and you want all of them to have same size. You can set sizes of all Button to size of Button with highest width value using horizontalAlign="justify" property/value.

align buttons in flex spark

<?xml version="1.0" encoding="utf-8"?>
<s:Application

xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">

<s:Group top="10" left="10">
<s:layout>
<s:VerticalLayout horizontalAlign="justify" />
</s:layout>

<s:Button label="first button" />
<s:Button label="second button" />
<s:Button label="third button" />
<s:Button label="forth button" />
</s:Group>
</s:Application>

1 comments:

Anonymous said...

this has been a gripe of mine for some time now. thanks for the tip!

 

template by blogger templates