Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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>

floating_with_left_right_icons_03

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>

floating_with_left_right_icons_02

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

Issue Analytics

State:
Created 8 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

brandyscarneycommented, Feb 24, 2016

Haha thanks. 😄

1reaction

brandyscarneycommented, Feb 23, 2016

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: https://github.com/driftyco/ionic/issues/5319

Top Results From Across the Web

Icons and Floating Inputs: Ionic - Prototype A - WordPress.com

Hi all, i stuck on mixing an `ion-icon` with an `floating label` like in this the *Angular Material Bootstrap Inputs Demo* ...

ion-item - Ionic Framework

Items are elements that can contain text, icons, avatars, images, inputs, and any other native or custom elements. Generally they are placed in...

Ionic 2: Input with Icon-Label - Stack Overflow

I had to use an icon and input element in separate fields of a row.. within a table..

Ionic List | Learn How List Components Work in Ionic? - eduCBA

Interactive Items with the sliding feature can be achieved using the ion-item-sliding attribute. Ion-item-sliding tag should always be a child element of ion- ......

5 Examples of the new Ionic 6 Bottom Sheet Modal

Get the details on how to use the brand new Ionic Bottom Sheet component in this ... <ion-label>People</ion-label> </ion-item> <ion-list ...