flex-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Alex Harui <aha...@adobe.com>
Subject Re: [FlexJS] Container horizontalAlign="center" / verticalAlign="middle" possible
Date Wed, 09 Dec 2015 21:07:17 GMT
And one more thing: if we see enough demand, we'd probably just create a
CenteringLayout or something like that is specifically designed to center
a child.

<js:Container width=„100%“ height=„100%“>
  <js:beads>
    <js:CenteringLayout />
  </js:beads>
  <js:Container width=„150“ height=„150“>
    <js:Label text="Hello World“/>
  </js:Container>
</js:Container>

And even:

<js:CenteringContainer width=„100%“ height=„100%“>
  <js:Container width=„150“ height=„150“>
    <js:Label text="Hello World“/>
  </js:Container>
</js:CenteringContainer>



-Alex

On 12/9/15, 12:46 PM, "Alex Harui" <aharui@adobe.com> wrote:

>
>
>On 12/9/15, 11:07 AM, "Marcus Fritze" <marcus.fritze@googlemail.com>
>wrote:
>
>>Hi,
>>
>>I started playing around a little bit with FlexJS. Is it possible to
>>align a container in the vertical middle / horizontal center, like in
>>FlexSDK.
>>
>>Something like:
>>
>><js:Container width=„100%“ height=„100%“ verticalAlign=„middle“
>>horizontalAlign=„center">
>>
>>	<js:Container width=„150“ height=„150“>
>>		<js:Label text="Hello World“/>
>>	</js:Container>
>>
>></js:Container>
>>
>>So the sub-Container should be located in the center middle of the top
>>Container.
>>
>
>In the JS output, we want to use as much default browser behavior as
>possible so when folks fool around with their CSS, it does what is
>expected.
>
>There is no CSS style called horizontalCenter, so that property isn't
>currently supported in BasicLayout, which is the default layout for
>Container.  Instead, you can use margin-left="auto" and
>margin-right="auto" to center a child.  And remember, the margins go on
>the child, it isn't a command for the parent layout.  So it would look
>like:
>
><js:Container width=„100%“ height=„100%“>
>    <js:Container width=„150“ height=„150“
>style="marginLeft:auto;marginRight:auto">
>        <js:Label text="Hello World“/>
>    </js:Container>
></js:Container>
>
>It turns out that verticalAlign is not supported on non-inline elements.
>If you choose HorizontalLayout, verticalAlign should work.
>
>A fancier absolute layout could implement verticalAlign and
>HorizontalCenter, but it will run more code on the JS side and thus be
>fatter and slower.  We'll probably build one in order to make a component
>set that is more like Spark, but we don't have one now.
>
>
>HTH,
>-Alex
>

Mime
View raw message