stacked labels do not play nice with item-right - Part 2

[gigocabrera]

Short description of the problem:

This is a follow up on the closed issue with stacked labels found here with this fix

What behavior are you expecting?

The item-left is vertically centered but the item-right is not. It shows on the bottom right corner in an <ion-item>

Wouldn't it make sense to place the right icons in the middle of the (vertically)? Just like the icon on the left? Take the markup below using an arrow-forward ionicon. It just doesn't look right to see the icon on the bottom right corner in iOS

<ion-item>
    <ion-icon name="leaf" item-left primary></ion-icon>
    <ion-label floating primary>First Name</ion-label>
    <ion-input type="text"></ion-input>
    <ion-icon name="arrow-forward" item-right primary></ion-icon>
</ion-item> 

Steps to reproduce:

1. Apply fix found here
2. Insert sample markup above on a component
3. Ionic serve

Ionic Version: 2.x

Browser & Operating System: iOS / Chrome

Run ionic info from terminal/cmd prompt:

Your system information:

Cordova CLI: 5.4.1
Gulp version:  CLI version 3.8.11
Gulp local:   Local version 3.9.1
Ionic Version: 2.0.0-beta.2
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
OS:
Node Version: v5.1.1

[brandyscarney]

Ok I had to add a wrapper to labels/inputs in order for this to work but now you can have avatars, thumbnails, buttons, etc. aligned vertically to the right of stacked/floating labels.

If you wanted to align the button to the top you could add the following css:

align-self: flex-start;

and to the bottom using:

align-self: flex-end;

I'm wondering if there should be a simple way of doing this, similar to ion-col's attributes:

&[top] {
  align-self: flex-start;
}
&[bottom] {
  align-self: flex-end;
}

&[center] {
  align-self: center;
}
&[stretch] {
  align-self: stretch;
}
&[baseline] {
  align-self: baseline;
}

Any thoughts? cc @adamdbradley

[brandyscarney]

Windows mode will default to aligning the item-right components to the bottom. Closing this since this is how item-left works.