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/ <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 <[email protected]>: > > 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" <[email protected]> wrote: > >> >> >> On 12/9/15, 11:07 AM, "Marcus Fritze" <[email protected]> >> 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 >> >
signature.asc
Description: Message signed with OpenPGP using GPGMail
