`item-right`在`ion-col`的按钮元素内不起作用

Question

I want to display name="ios-navigate" (which is showing as a navigation icon in bellow image) right side in the column partition. I have given item-right attribute to the button element inside 'ion-col' but its not working.

Its currently displaying bellow,

<ion-item>
   <ion-row>
      <ion-col width-33>
         <button style="padding: 0px 0px;" [disabled]="!item.Website" ion-button icon-left clear item-right (click)="RedirectWebsite(item.Website)">
            <ion-icon name="md-globe"   item-left large></ion-icon>
            WWW
         </button>
      </ion-col>
      <ion-col width-33>
         <button ion-button icon-left clear item-right [disabled]="!item.Phone"  (click)="dialNumber(item.Phone)">
            <ion-icon name="md-call" color="primary" item-left large></ion-icon>
            Phone
         </button>
      </ion-col>
      <ion-col  width-33>
         <button ion-button  item-right icon-left clear  (click)="GetRoute(item.geometry.location.lat,item.geometry.location.lng)">
            <ion-icon icon-right  name="ios-navigate" color="primary" large></ion-icon>
         </button>
      </ion-col>
   </ion-row>
</ion-item>

Answer 1

Check out the latest ion-grid API based on flexbox. width-* is deprecated for col-* . Also item-left and item-right attributes work for ion-item elements. You need to use row attributes .Try justify-content-end to align horizontally right.

<ion-row justify-content-end>
      <ion-col col-4>
         <button style="padding: 0px 0px;" [disabled]="!item.Website" ion-button icon-left clear (click)="RedirectWebsite(item.Website)">
            <ion-icon name="md-globe"   item-left large></ion-icon>
            WWW
         </button>
      </ion-col>
      <ion-col col-4>
         <button ion-button icon-left clear [disabled]="!item.Phone"  (click)="dialNumber(item.Phone)">
            <ion-icon name="md-call" color="primary" item-left large></ion-icon>
            Phone
         </button>
      </ion-col>
      <ion-col  col-4>
         <button ion-button icon-left clear  (click)="GetRoute(item.geometry.location.lat,item.geometry.location.lng)">
            <ion-icon icon-right  name="ios-navigate" color="primary" large></ion-icon>
         </button>
      </ion-col>
   </ion-row>