Feb
15

Center Elements in Adobe Flex When Using s:layout

By bradj // Adobe Flex // No Comments

This is something I found quite irritating. When you are using

<s:layout>
	<s:VerticalLayout />
</s:layout>

it generates a container around the rest of your components. Thus, whenever you try to align those components they are bound to the limits of the auto generated container. Which means you will get something like this:

This is bad. So, how do you fix it? This is how:

<s:layout>
	<s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
</s:layout>

Which yields…

This annoyed me for a solid 30 minutes. Hope it helped you.

This is the entire application I was working in while figuring this out.

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					   xmlns:s="library://ns.adobe.com/flex/spark" 
					   xmlns:mx="library://ns.adobe.com/flex/mx"
					   height="400"
					   width="600">
	<s:layout>
		<s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
	</s:layout>
 
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<s:VGroup width="{this.width - 10}" height="{this.height - 30}">
		<mx:HBox width="100%">
			<s:TextInput id="ti_url" width="100%" />
			<s:Button id="bt_submit" label="Get Response" />
		</mx:HBox>
		<s:TextArea id="returnArea" editable="false" height="100%" width="100%" />
	</s:VGroup>
 
</s:WindowedApplication>