Ionic 2 Android title and buttons not aligned in navbar
I am using ionic v2. I have a problem in nav bar in android. see this image: https://drive.google.com/file/d/0B7NIjYwi6WIpM0I3eXJLdWlnV0k/view?usp=sharing
the title and button on the left and right are not vertically aligned. the left is at the top, the title is at the bottom, and the left buttons are in the middle.
On iOS and the web browser, everything is perfectly aligned. 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>
source to share
I found a really hacky way to solve this, but hey it works.
Just put this in your .scss file:
.toolbar-title-md {
text-align: left;
margin-right: 50px;
margin-bottom: -30px;
}
Toolbar-title-md is an exact text element. When margins are placed on it, it seems to work as you expected, as usual. When flipped the other way, it has the same position as the navigation item (instead of modal).
I would suggest finding a way to cut the text off the amount you want so that you avoid the beginning of the heading that was cut off rather than ending.
source to share