I search for a easy and efficient way to center all childs in a container using basic package. (Because mixing basic and jewel layouts leads to some unwanted sides effects)
Must I use CSS, beads ? If both are usable what is difference and can I have code sample of each ?
For exemple could you tell me how to modify this code to center the text label:
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:j="library://ns.apache.org/royale/jewel"
xmlns:js="library://ns.apache.org/royale/basic" xmlns:local="*">
<js:valuesImpl>
<js:SimpleCSSValuesImpl />
</js:valuesImpl>
<js:initialView>
<js:View>
<js:beads>
<js:VerticalLayout/>
</js:beads>
<js:Label text="How to center me on horizontal axis ?"/>
</js:View>
</js:initialView>
</js:Application>
Thanks to yishayw, as I'm not familiar with how to add css, I find how to do it and put the full working code here. I would expect that js|View would trigger the style but looking on css with browser I saw that style name for first "view" is "royale"
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:j="library://ns.apache.org/royale/jewel"
xmlns:js="library://ns.apache.org/royale/basic" xmlns:local="*">
<fx:Style>
@namespace j "library://ns.apache.org/royale/jewel";
@namespace js "library://ns.apache.org/royale/basic";
.royale {
align-items :center;
}
js|Label {
color: #ff0000;
}
</fx:Style>
<js:valuesImpl>
<js:SimpleCSSValuesImpl />
</js:valuesImpl>
<js:initialView>
<js:View >
<js:beads>
<js:VerticalFlexLayout />
</js:beads>
<js:Label text="How to center me on horizontal axis ?"/>
</js:View>
</js:initialView>
</js:Application>
Regards
Try using VerticalFlexLayout and adding align-items: center to the style of the container.