I forgot to add that "align-items:center" is not supported on the SWF side
yet. The Flexbox has a number of properties that I still have to implement
on the flex side.
On 3/28/17, 8:11 AM, "Peter Ent" <p...@adobe.com> wrote:
>The HorizontalLayout and VerticalLayout do not center their content
>because the equivalent code on the JS side does not do that (at least it
>did not do that for me in the tests I ran). I think setting margin:auto is
>supposed to help with that.
>
>On the other hand, you can switch to HorizontalFlexLayout and
>VerticalFlexLayout. Then on the Group or Container CSS, do the following:
>
>.styleForVerticalFlexLayout {
> align-items: center;
>}
>
>.styleForHorizontalFlexLayout {
> align-items: center;
>}
>
>This is still a learning experience both understanding the complexities of
>CSS and building an system that generates clean and robust HTML/CSS/JS.
>
>Thank you for your patience.
>
>—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%2Fapac
>>>>>>>h
>>>>>>>e-f
>>>>>>> le
>>>>>>>
>>>>>>>
>>>>>>>x-development.2333347.n4.nabble.com%2FFlexJS-Summary-of-Changes-tp60
>>>>>>>7
>>>>>>>09p
>>>>>>> 60
>>>>>>>
>>>>>>>
>>>>>>>779.html&data=02%7C01%7C%7Cd418c8770a394118a2f208d4745e47ea%7Cfa7b1b
>>>>>>>5
>>>>>>>a7b
>>>>>>> 34
>>>>>>>
>>>>>>>
>>>>>>>438794aed2c178decee1%7C0%7C0%7C636261395657671115&sdata=29GdLLPJdggl
>>>>>>>Z
>>>>>>>FzZ
>>>>>>> UF
>>>>>>> AOBNCBt0S8qshiPOmXCDEbRKw%3D&reserved=0
>>>>>>> Sent from the Apache Flex Development mailing list archive at
>>>>>>> Nabble.com.
>>>>>>
>>>>>
>>>>
>>>
>>
>
