Issue with ActionBar - ActionItem and StackLayout


#1

I have a component to manage the action bar for me:

e-bar.component.html

<ActionBar [title]="page || 'Execeo'">
    <StackLayout
            orientation="horizontal"
            ios.position="center"
            ios:horizontalAlignment="center"
            android:horizontalAlignment="left">
        <Image src="~/images/execeo-logo.png" stretch="aspectFit" class="action-image"></Image>
        <Label [visibility]="page ? 'visible' : 'collapse'" [text]="page" class="action-label"></Label>
    </StackLayout>
    <ActionItem
            [visibility]="doShowHome ? 'visible' : 'collapse'"
            (tap)="goHome()"
            ios.position="right"
            text="Go Home">
        <Image src="~/images/icons/home.png" class="homeButton"></Image>
    </ActionItem>
</ActionBar>

And in individual pages, I do the following:

<e-bar page="Tasks"></e-bar>

In Android, it looks pretty good. In iOS though, the icon is always in the center, even if it overlaps the “title”. Also the title gets moved to the left. I have gone through every example, looks at other projects, and for some reason I can not figure this out. Any help would be amazing.

iOS:


#2

The android screen for reference looks like:


#3

You can’t use Title and TitleView at same time. Try removing title of actionbar.


#4

I tried that with the same result. The title attribute does not show up, as I tried putting in random text and got the exact same result.

The only difference is that the “back” button on ios doesn’t show where your going back to if you don’t put in a title