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%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.
>>>>>
>>>>
>>>
>>
>
