Input field with floating label and icon

@opahopa wrote:

Greetings.

I feel like this is an extremely typical case i guess there is some out-of-the-box solution.

How do i properly set the in Input field with floating label and icon (icon as a placeholder) ?

Now tried:

 <ion-list class="items-middle" text-center>
    <ion-item>
      <ion-label color="ligh-grey" floating><ion-icon item-left name="mail"></ion-icon>Email</ion-label>
      <ion-input type="email"></ion-input>
    </ion-item>
    <ion-item>
      <ion-icon item-left name="lock"></ion-icon>
      <ion-label color="ligh-grey" floating>Password</ion-label>
      <ion-input type="password"></ion-input>
    </ion-item>
    <ion-buttons padding-top>
      <button ion-button full round>Login</button>
    </ion-buttons>
  </ion-list>

1st case (email input) - icon is in the label. works well for androind & ios, but broken for windows.
2nd case (pass input) - problem for all devices - elements vertical align. simple css tricks didn't help.

http://c2n.me/3McagKW

Thank you.

Posts: 2

Participants: 2

Read full topic