flex-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Peter Ent <p...@adobe.com>
Subject Re: [FlexJS] Container horizontalAlign="center" / verticalAlign="middle" possible
Date Thu, 10 Dec 2015 13:16:40 GMT
The ASDoc was generated a while ago and can be found in my Apache people directory:

http://people.apache.org/~pent/asdoc-flexjs/index.html

This is temporary, of course.

Peter Ent
Adobe Systems/Apache Flex Project

From: Marcus Fritze <marcus.fritze@googlemail.com<mailto:marcus.fritze@googlemail.com>>
Reply-To: <users@flex.apache.org<mailto:users@flex.apache.org>>
Date: Thursday, December 10, 2015 at 8:03 AM
To: <users@flex.apache.org<mailto:users@flex.apache.org>>
Subject: Re: [FlexJS] Container horizontalAlign="center" / verticalAlign="middle" possible

Thank you for your detailed explanations.

It works. Nice!

This brings to my next questions:

Do we have ASDocs / any API documentation for flexJS. If yes, where can I find it.
Maybe we should also add a link on http://flex.apache.org/ under documentation.

And currently no max-width / max-height supported? Setting this in style will also not work.

Thanks.

Marcus


Am 09.12.2015 um 22:07 schrieb Alex Harui <aharui@adobe.com<mailto:aharui@adobe.com>>:

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<mailto:aharui@adobe.com>>
wrote:



On 12/9/15, 11:07 AM, "Marcus Fritze" <marcus.fritze@googlemail.com<mailto: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
  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message