flex-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Harbs <harbs.li...@gmail.com>
Subject Re: [FlexJS] Spacers and positioning
Date Sun, 12 Feb 2017 06:07:19 GMT
Currently, the best you can do to spread elements in FlexJS is by using OneFlexibleChildVerticalLayout
and OneFlexibleChildHorizontalLayout.

The more we use FlexJS, the more we’re coming to the conclusion that we really need a ConstrainedLayout
which has the features of the classic Flex layout…

Harbs

> On Feb 12, 2017, at 4:46 AM, Justin Mclean <justin@classsoftware.com> wrote:
> 
> Hi,
> 
> An old trick to get things to be pined to the RHS was to use a 100% spacer in MXML.
> 
> However code like this doesn’t work in FlexJS:
> 
> <js:HContainer percentWidth="100">
>    <js:Label text="Left" />
>    <js:Spacer percentWidth="100" />
>    <js:Label text="Right" />
> </js:HContainer>
> 
> But in FlexJS the spacer is 100% of the containers width and the button wraps onto the
next line.
> 
> You can do this but is seems bit cumbersome:
> 
> <js:HContainer percentWidth="100">
>    <js:Label text="Left" />
>    <js:Label text="Right" style="position:absolute;right:0px;" />
> </js:HContainer>
> 
> And a little more cumbersome once you have several items you want to evenly space.
> 
> <js:initialView>
>    <js:View percentWidth="100">
>        <js:HContainer percentWidth="100">
>            <js:Container percentWidth="25">
>                <js:TextButton text="one" style="margin-left: auto; margin-right: auto;"/>
>            </js:Container>
>            <js:Container percentWidth="25">
>                <js:TextButton text="two" style="margin-left: auto; margin-right: auto;"/>
>            </js:Container>
>            <js:Container percentWidth="25">
>                <js:TextButton text="three" style="margin-left: auto; margin-right:
auto;"/>
>            </js:Container>
>            <js:Container percentWidth="25">
>                <js:TextButton text="four" style="margin-left: auto; margin-right:
auto;"/>
>            </js:Container>
>        </js:HContainer>
>    </js:View>
> </js:initialView>
> 
> Is there a better way of doing this?
> 
> Thanks,
> Justin
> 


Mime
View raw message