Harbs - I have to rollback the setting of position="absolute" (when setting .x or .y properties) on my next commit. This is causing other examples to behave weirdly in situations where the parent of the element whose position is being set does not itself have a position set.
After talking with Alex, I think the better solution is to use more layouts. Since you are using Container whose default layout is Basic, you should not always have a problem since BasicLayout will go through the children and set their positions to "absolute" and set the position on the container DIV itself to "relative". If you are building a component and want to set sub-pieces to specific locations, then perhaps your component should extend Group and add in a BasicLayout bead; just make sure you dispatch a "layoutNeeded" event on the Group. And if this is the way to proceed, we could make a ComponentBase class that simply extended Group and added in BasicLayout as its default layout. —peter On 3/27/17, 4:46 PM, "Harbs" <harbs.li...@gmail.com> wrote: >I probably need to examine the new “flex” layouts. > >Is there a way to have content centered using those? > >> On Mar 27, 2017, at 11:35 PM, Harbs <harbs.li...@gmail.com> wrote: >> >> Better, but I still have some problems (there’s probably more): >> >> <js:Container width="100%" id="outerControls"> >> <js:style> >> <js:SimpleCSSStyles backgroundColor="0x444444"/> >> </js:style> >> <js:Container id="controls"> >> <js:style> >> <js:SimpleCSSStyles marginLeft="auto" >> marginRight="auto"/> >> </js:style> >> <js:beads> >> <js:HorizontalLayout/> >> </js:beads> >> <js:ImageButton className="iconButton white" >> width="30" height="30" >>click="undo_clickHandler(event)" id="undoButton" >>src="assets/images/icons/0726-undo.svg"> >> <js:beads> >> <js:DisableBead/> >> </js:beads> >> </js:ImageButton> >> <js:ImageButton className="iconButton white" >> width="30" height="30" >>click="redo_clickHandler(event)" id="redoButton" >>src="assets/images/icons/0727-redo.svg"> >> <js:beads> >> <js:DisableBead/> >> </js:beads> >> </js:ImageButton> >> <js:ImageButton className="iconButton white" >> width="30" height="30" >>click="zoomin_clickHandler(event)" >>src="assets/images/icons/0806-zoom-in.svg"/> >> <js:ImageButton className="iconButton white" >> width="30" height="30" >>click="zoomout_clickHandler(event)" >>src="assets/images/icons/0807-zoom-out.svg"/> >> <js:ImageButton className="iconButton white" >> width="30" height="30" >>click="fitButton_clickHandler(event)" >>src="assets/images/icons/0843-expand.svg"/> >> <js:ImageButton className="iconButton white" >> width="30" height="30" >>click="previewButton_clickHandler(event)" >>src="assets/images/icons/0786-file-preview-white.svg"/> >> <js:Spacer width="10"/> >> <js:ImageButton className="iconButton white" >> width="30" height="30" >>click="finishButton_clickHandler()" >>src="assets/images/icons/0821-check.svg"/> >> <js:Spacer width="10"/> >> <js:ImageButton className="iconButton white" >> width="30" height="30" >>click="cancelButton_clickHandler()" >>src="assets/images/icons/0822-cross2.svg"/> >> </js:Container> >> >> 1. This used to create a centered group of buttons. Now, the container >>has a height of 0 and the buttons don’t show up. >> >> 2. >> <js:Container className="designOuterContainer" >> id="scrollContainer" >>width="100%" height="100%"> >> <js:beads> >> <js:ScrollingViewport/> >> </js:beads> >> <components:DesignAreaHolder >> id="designContainer" >>className="_holder" y="0"> >> <components:style> >> <js:SimpleCSSStyles >> marginLeft="auto" marginRight="auto"/> >> </components:style> >> </components:DesignAreaHolder> >> >> </js:Container> >> >> This used to create a scrolling div that was centered in the the >>window. It now is aligned left, and I don’t know if it scrolls. >> >> There’s other issues, and I’ll see tomorrow what I can work around. >> >>> On Mar 27, 2017, at 11:08 PM, Peter Ent <p...@adobe.com> wrote: >>> >>> Hi, >>> >>> I just pushed a change to UIBase to set position="absolute" when >>>setting x >>> or y. I think this is perfectly safe and if someone does set x and y >>>and >>> then tries to use a layout where that would be a conflict, they will >>>get >>> have to avoid setting those properties. >>> >>> I figured this would eventually happen. Let's see if this fixes the >>>issue. >>> >>> —peter >>> >>> >>> On 3/27/17, 2:58 PM, "Harbs" <harbs.li...@gmail.com> wrote: >>> >>>> Peter, >>>> >>>> I just tried loading my app with your changes, and everything is >>>>totally >>>> borked. We rely a lot on absolute positioning and transformations. >>>> >>>> We really need the old behavior in some components. >>>> >>>> Is there any components which work the same as they used to? >>>> >>>> Harbs >>>> >>>>> On Mar 26, 2017, at 6:55 PM, Peter Ent <p...@adobe.com> wrote: >>>>> >>>>> For the time being, the Tour main view should have a width and a >>>>>height: >>>>> >>>>> <local:TourJSMainView id="mainView" width="100%" height="900" /> >>>>> >>>>> Then in the style section, give everything flex-grow: 1; and it >>>>>should >>>>> look better. I think some padding and/or margins might be needed, >>>>>but I >>>>> think I have more work do with the layouts. I'll bump getting the >>>>>tour >>>>> to >>>>> the top of the list for this week because I think its nesting of >>>>> elements >>>>> is a good test. I think it is just a matter of setting the style >>>>>values >>>>> right. HTML structure-wise it looks fine, so that's good. >>>>> >>>>> ‹peter >>>>> >>>>> On 3/26/17, 11:31 AM, "piotrz" <piotrzarzyck...@gmail.com> wrote: >>>>> >>>>>> Peter, >>>>>> >>>>>> I've started to experiment with your new classes in TourJS and I >>>>>>think >>>>>> I've >>>>>> achieved some good look, but not everything is working as expected. >>>>>> >>>>>> For some reason code of examples has not been loaded properly. If >>>>>>you >>>>>> could >>>>>> review my changes and give some feedback, whether I used your new >>>>>> classes >>>>>> in >>>>>> appropriate manner. >>>>>> >>>>>> Thanks, >>>>>> Piotr >>>>>> >>>>>> >>>>>> >>>>>> ----- >>>>>> Apache Flex PMC >>>>>> piotrzarzyck...@gmail.com >>>>>> -- >>>>>> View this message in context: >>>>>> >>>>>> >>>>>>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapach >>>>>>e-f >>>>>> le >>>>>> >>>>>> >>>>>>x-development.2333347.n4.nabble.com%2FFlexJS-Summary-of-Changes-tp607 >>>>>>09p >>>>>> 60 >>>>>> >>>>>> >>>>>>779.html&data=02%7C01%7C%7Cd418c8770a394118a2f208d4745e47ea%7Cfa7b1b5 >>>>>>a7b >>>>>> 34 >>>>>> >>>>>> >>>>>>438794aed2c178decee1%7C0%7C0%7C636261395657671115&sdata=29GdLLPJdgglZ >>>>>>FzZ >>>>>> UF >>>>>> AOBNCBt0S8qshiPOmXCDEbRKw%3D&reserved=0 >>>>>> Sent from the Apache Flex Development mailing list archive at >>>>>> Nabble.com. >>>>> >>>> >>> >> >
