Input field with floating label and icon

Ionic Framework ionic-v3
1

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.

2

Hey I am not an expert but here is my interpretation of the code.

Case 2: The float tag is only applied to the label so the icon is stuck where it is.
Case 1: is the right approach.

Then again. The I tried the code on plunker. I see a problem here.
Float tag and placeholder don’t go together (tag and the placeholder sort of are on top of each other in my plunker code. )

image
image.png1020×189 9.38 KB

You could use the label as stacked and have a icon placeholder. To do the icon placeholder take a look at this page.

Cheers
SD

3

actually not very similar case.

4

Still have this problem. Any suggestion on right solution?

1 Like
5

Try this,

<ion-item>
  <ion-label position="floating">
    <ion-icon item-left name="mail"></ion-icon>
    Email
  </ion-label>
  <ion-input ></ion-input>
</ion-item>