ActionItem alignment


#1

I have an issue someone here might help to solve… I have currently an ActionBar which looks like this:

action-bar-1

If you touch the magnifier, this is what is shown:

action-bar-2

And if you touch the back arrow, the action bar should be like it was at first, but something weird happens to the magnifier…

action-bar-3

I’m currently showing / hiding the ActionItems with the visibility attribute, but I don’t know why this misalignment is happening when I show them again.

The actual code is something like this:

<ActionBar
    class="action-bar"
    title="{{ actionBarTitle }}"
    [ngClass]="{
        'action-bar-search-bar-visible' : showSearch
    }"
>
    <!-- Android menu button -->
    <NavigationButton
        (tap)="toggleDrawer()"
        [visibility]="showSearch ? 'collapse' : 'visible'"
        *ngIf="isAndroid"
        class="action-bar-item"
        icon="res://menu_icon_white"
    ></NavigationButton>
    <!-- iOS menu button -->
    <ActionItem
        (tap)="toggleDrawer()"
        [visibility]="showSearch ? 'collapse' : 'visible'"
        *ngIf="isiOS &&"
        class="action-bar-item action-bar-item-menu-icon"
        ios.position="left"
    ><Image src="res://menu_icon_white"></Image></ActionItem>
    <!-- Search bar toggle -->
    <ActionItem
        (tap)="toggleSearch()"
        [visibility]="showSearch ? 'collapse' : 'visible'"
        android.position="popup"
        class="action-bar-item action-bar-item-menu-icon"
        ios.position="right"
    ><Image src="res://ic_search"></Image></ActionItem>
    <!-- Search bar -->
    <search-bar-custom
        *ngIf="showSearch"
        (on-search-hide)="toggleSearch()"
    ></search-bar-custom>
</ActionBar>

#2

Finally got it working, you can check the answer here https://stackoverflow.com/questions/46370495/nativescript-actionbar-actionitem-alignment