2017-05-01 5 views
3

イオンv2を使用しています。私はアンドロイドのナビゲーションバーに問題があります。 この画像をご覧ください: https://drive.google.com/file/d/0B7NIjYwi6WIpM0I3eXJLdWlnV0k/view?usp=sharingionic 2 Androidのタイトルとボタンがナビゲーションバーに配置されていません

左右のタイトルとボタンは垂直に整列していません。左が上、タイトルが下、左ボタンが中央です。

iOSとウェブブラウザでは、すべてが完全に整列しています。ここでの画像は、次のとおりです。

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

ここに私のhtmlは、イオン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> 
+0

これをどのように解決しましたか? – superUser

答えて

1

私はこれを解決するために、本当にハック方法を見つけましたが、ちょっと、それは動作します。

だけ.scssファイルでこれを置く:

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

ツールバータイトル-MDは、正確なテキストアイテムです。マージンが置かれているときは、それが通常どおりになるように自分自身を調整するようです。逆の場合は、navアイテムが(モーダルではなく)プッシュされたのとまったく同じ位置になります。

タイトルの先頭を切り捨てるのを避けるために、テキストを適切な量だけ切り取る方法を見つけることをおすすめします。

関連する問題