I’m trying to create a Modal screen for android with close button on left side, but it doesn’t work. It always shows on right side.
<ion-navbar *navbar>
<ion-buttons start>
<button (click)="close()">
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>
<ion-title>
Page Title
</ion-title>
</ion-navbar>
Anybody knows how can i do it?
1 Like
ion-buttons[start] {
order: 1;
}
This is per design for md and ios. But you can override this.
<ion-navbar *navbar>
<ion-buttons left>
<button (click)="close()">
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>
<ion-title>Tab 1</ion-title>
</ion-navbar>
By passing left/right to the ion-buttons.
8 Likes
Hm… So start/end renamed to left/right?
1 Like
Nope,
Start and End follow the UI pattern for the platform
So <ion-buttons start>
would be on the left for ios and be the first button on the right for android.
<ion-buttons end>
would be on the right for ios and the last button on the right for android.
Left/right are provide as a way to over ride that.
4 Likes
This works fine
Thank you.
Thanks, I renamed to left and it worked perfectly
Anyone know where these properties are documented? I can’t seem to find it in the v2 docs? I’m guessing there are more of these “helper properties”, would love to see a list besides http://ionicframework.com/docs/v2/theming/css-utilities/
Ask and you shall receive
2 Likes
@mhartington - that info about left and right over riding platform defaults while start and end comply with platform defaults is really useful, you should look at adding it to the component docs where there are button examples as it only references start and end.
Thanks, It solved my problem