Category Archives: Constraints

Baseline alignment with constraints in Flex 3

One of the minor improvements in Flex 3 regarding layout is baseline alignment. Setting the baseline constraint means that the user is specifying an offset from the top edge of a constraint region or parent border and the control’s baseline. By offering a baseline constraint style, we can now allow multiple components to be constrained along a single shared baseline. Here is an example of two panels. One has no baseline set on the components. The other uses a baseline and a ConstraintRow.

The Panel using a baseline constraints looks like this:


<mx:Panel title=”baseline in a ConstraintRow” layout=”absolute” >
<mx:constraintRows>
<mx:ConstraintRow height=”200″ id=”row1″/>
<mx:ConstraintRow height=”100″ id=”row2″/>
</mx:constraintRows>
<mx:Text text=”San Francisco” baseline=”row1:20″ />
<mx:Button label=”Newton” x=”70″ baseline=”row1:20″ />
<mx:DateChooser x=”140″ baseline=”row1:20″ />
<mx:Label text=”Romania” x=”310″ baseline=”row1:20″ />
</mx:Panel>

Demo: simpleBaseline.swf

Source: simpleBaseline.mxml

At this time, you cannot set the verticalAlign style to a baseline. This is still an open bug: SDK-11725

Follow

Get every new post delivered to your Inbox.