ion-item with a floating ion-label breaks when adding an icon

[gigocabrera]

Not sure if this is an ionic 2 issue or ionic-conference-app issue

If I add a left/right icons to an ion-item everything works fine

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

If I add a left/right icons to an ion-item with a floating label, it breaks

<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>

If this is by design, can you help me find a solution?

[brandyscarney]

Yes, this is an ionic issue. I got around it for demo purposes by using absolute positioning on the icons:

https://github.com/driftyco/ionic/blob/2.0/demos/label/main.html#L15-L20
https://github.com/driftyco/ionic/blob/2.0/demos/label/main.html#L58-L68

This issue will resolve it: ionic-team/ionic-framework#5319

[gigocabrera]

Thank you @brandyscarney you're the best (from one Floridian to another)

[brandyscarney]

Haha thanks. 😄

[wellington1993]

Thanks!

[Balaraju1]

ion-select and ion-datetime floating label not working in ionic 4 beta 2.

<ion-item>
<ion-label position="floating">Label :</ion-label>
<ion-select>
<ion-option-select></ion-option-select>
<ion-option-select></ion-option-select>
<ion-option-select></ion-option-select>
</ion-select>
</ion-item>

<ion-item>
<ion-label position="floating">Label :</ion-label>
<ion-datetime></ion-datetime>
</ion-item>