FlexboxLayout does not work properly in ActionBar

The code in xml is as follows:

<Page.actionBar>

			<ActionBar>
				<ActionBar.titleView>
					<FlexboxLayout flexDirection="row" justifyContent="space-between">
						<Label text="leftIcon" />
						<Label text="middleText" />
						<Label text="rightIcon" />
					</FlexboxLayout>
				 </ActionBar.titleView>
			</ActionBar>
    </Page.actionBar>

The 3 labels are shown side by side which is not what justifyContent=“space-between” means.

more info:

1. development machine: Windows 10 64bit
2. target platform: android
3. cli version: 3.2.1
4. Cross-platform modules: 3.2.0
5. Runtime: 3.2.0
6. Plugin: no plugin used.

Thank you.

<bountysource-plugin>

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource. </bountysource-plugin>

[tsonevn]

Hi @bigradish, To be able to set the needed position of the label as you wish: one of the label to be left aligned second one on the right and third, in the middle, you could use a combination of WrapLayout and DockLayout. For example:

XML

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
   <Page.actionBar>

			<ActionBar>  

				<WrapLayout>
					<DockLayout class="layoutclass" height="70" style.backgroundColor="lightgray" stretchLastChild="true">
						<Label padding="20" text="leftl" dock="left" backgroundColor="red"/>
						<Label padding="20" text="right" dock="right" backgroundColor="blue"/>
						<Label  marginLeft="20" marginRight="20" text="center" dock="bottom" backgroundColor="yellow"/>
					</DockLayout>
				</WrapLayout>
			</ActionBar>
    </Page.actionBar>
    <StackLayout class="p-20">
        <Label text="Tap the button" class="h1 text-center"/>
        <Button text="TAP" tap="{{ onTap }}" class="btn btn-primary btn-active"/>
        <Label text="{{ message }}" class="h2 text-center" textWrap="true"/>
    </StackLayout>
</Page>

CSS

DockLayout{
    width:100%;
}

[vallemar]

This still doesn’t work, do you know anything about this?