CODEWITHSUNDEEP
androidionic-frameworknavbar
fkie4
fkie4

Reputation: 251

ionic 2 Android title and buttons are not aligned in nav bar

I am using ionic v2. i have problem in nav bar in android. please see this image: https://drive.google.com/file/d/0B7NIjYwi6WIpM0I3eXJLdWlnV0k/view?usp=sharing

the title and button on left and right are not vertically aligned. the left one is on top, title in at bottom, and the left buttons are at middle.

In iOS and web browser, the all aligned perfectly. here is the image:

https://drive.google.com/file/d/0B7NIjYwi6WIpcERhd1dPa3FVaDA/view?usp=sharing

here is my html in ionic v2:

<ion-header>
    <ion-navbar color="nav_bar" class="nav_bar_style">

    <ion-buttons start>
        <button ion-button clear color="nav_bar_bttn (click)="searchBttnPressed()">
        <ion-icon ios="ios-search" md="md-search"></ion-icon>
        </button>
    </ion-buttons>

    <ion-title text-center>Main</ion-title>

    <ion-buttons end>
        <button ion-button clear color="nav_bar_bttn" (click)="sortBttnPressed()">
            <ion-icon>Sort</ion-icon>
        </button>
        <button ion-button clear color="nav_bar_bttn" (click)="addBttnPressed()">
            <ion-icon name="md-add"></ion-icon>
        </button>
    </ion-buttons>
    </ion-navbar>
</ion-header>

<ion-content>
    <ion-list>
    <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
        {{item.noteId}}
            <div class="item-note" item-right>
                {{item.content}}
            </div>
    </button>
    </ion-list>
    <div *ngIf="selectedItem" padding>
        You navigated here from <b>{{selectedItem.title}}</b>
    </div>
</ion-content>

Upvotes: 3

Views: 445

Answers (1)

Jacob Bartlett
Jacob Bartlett

Reputation: 127

I found a really hacky way to solve this but hey, it works.

Just put this in the .scss file:

.toolbar-title-md {
    text-align: left;
    margin-right: 50px;
    margin-bottom: -30px;
}

Toolbar-title-md is the exact text item. When margins are placed on it it seems to arrange itself as you'd expect it to normally. When flipped the other way, it has the exact same positioning as if the nav item was pushed (instead of a modal).

I'd recommend finding a way to cut the text off the right amount so you avoid the start of the title getting cut off instead of the end.

Upvotes: 1

Related Questions