You can use CSS Flexbox[1] on the JS side to handle these situations. I'm thinking about making a layout that makes it possible to specify Flexbox and have some/all of it work on the SWF side as well.
Its a bit of work but I think it will be worth it. If anyone is interested in helping, let me know. ‹peter [1] https://css-tricks.com/snippets/css/a-guide-to-flexbox/ On 2/12/17, 1:55 AM, "Alex Harui" <aha...@adobe.com> wrote: >In the current layouts, %width works the way it does in the browser and >not the way it did in Flex. Where should we document that so folks find >it easily? > >If someone wants to port the Flex layouts that's fine with me. They will >be at least twice as slow, if not more, but that's PAYG for you. > >I think you might be able to use Spacer as the FlexibleChild in >OneFlexibleChildHorizontalLayout > >And we want the recommended JS patterns to work. Nice to know that you >got position:absolute;right:0px; to work. Supposedly "float: right" will >work as well, but I don¹t think the SWF side supports that. > >We are in the business of finding common patterns and encapsulating them. >So, it is totally within the FlexJS philosophy to have a bead called a >RightAlignBead that injects position:absolute;right:0px; into the styles >block. There is probably some trickiness to dealing with conflicts if the >styles are also being set in some other way, but then you could do: > ><js:Label text="Right"> > > <js:beads> > <js:RightAlignBead /> > </js:beads> ></js:Label> > >I'm not sure I understand the last code snippet, but there is no reason >not to create a 4ColumnLayout. We have a VerticalColumnLayout already. >Find the pattern and encapsulate it so others can use it. Try to keep it >small and loosely coupled. > >My 2 cents, >-Alex > >On 2/11/17, 10:07 PM, "Harbs" <harbs.li...@gmail.com> wrote: > >>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 <jus...@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 >>> >> >
