Constraints are designed to be used to constrain other components for things 
like alignment and size.  For your app, just add a group around each of your 
containers and you're fine.

-TH

<?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"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        backgroundColor="blue">

        <s:SkinnableContainer id="mainContentArea"
                backgroundColor="red"
                bottom="100"
                top="100">
                <s:layout>
                        <s:ConstraintLayout>
                                <s:constraintColumns>
                                        <s:ConstraintColumn id="col1"
                                                width="{ width / 2 }" />
                                        <s:ConstraintColumn id="col2"
                                                width="{ width / 2 }" />
                                </s:constraintColumns>
                        </s:ConstraintLayout>
                </s:layout>

                <s:Group 
                        height="100%"
                        left="col1:0"
                        right="col1:0">
                        <s:BorderContainer id="greenContainer"
                                width="400"
                                height="300"
                                backgroundColor="green"
                                horizontalCenter="0"
                                verticalCenter="0" />
                </s:Group>

                <s:Group 
                        height="100%"
                        left="col2:0"
                        right="col2:0">
                        <s:BorderContainer id="yellowContainer"
                                width="200"
                                height="150"
                                backgroundColor="yellow"
                                horizontalCenter="0"
                                verticalCenter="0" />
                </s:Group>

        </s:SkinnableContainer>

</s:Application>

--- In flexcoders@yahoogroups.com, RobertTr <rexdtripod@...> wrote:
>
> 
> Here's code that splits the screen into two columns, left and right. Then it
> puts a box in each column and attempts to center them. The horizontalCenter
> and verticalCenter properties are ignored:
> 
> <?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" 
>                          xmlns:mx="library://ns.adobe.com/flex/mx"
>                          backgroundColor="blue">
>       <fx:Declarations>
>               <!-- Place non-visual elements (e.g., services, value objects) 
> here -->
>       </fx:Declarations>
>       <s:SkinnableContainer id="mainContentArea"
>                        top="100" bottom="100"
>                        backgroundColor="red">
>               <s:layout>
>                       <s:ConstraintLayout>
>                               <s:constraintColumns>
>                                       <s:ConstraintColumn id="col1" 
> width="{width/2}" />
>                                       <s:ConstraintColumn id="col2" 
> width="{width/2}" />                              
>                               </s:constraintColumns>                          
>         
>                       </s:ConstraintLayout>
>               </s:layout>
>               <s:BorderContainer id="greenContainer"
>                                                  backgroundColor="green"
>                                                  width="400" height="300"
>                                                  horizontalCenter="col1:0"
>                                                  verticalCenter="0">
>               </s:BorderContainer>    
>               <s:BorderContainer id="yellowContainer"
>                                                  backgroundColor="yellow"
>                                                  width="200" height="150"
>                                                  horizontalCenter="col2:0"
>                                                  verticalCenter="0">
>               </s:BorderContainer>            
>       </s:SkinnableContainer>
> </s:Application>
> 
> -- 
> View this message in context: 
> http://old.nabble.com/Why-don%27t-horizontalCenter-and-verticalCenter-work-with-Spark-ColumnConstraints--tp32358020p32358020.html
> Sent from the FlexCoders mailing list archive at Nabble.com.
>


Reply via email to