Ionic-framework: Label inside of Chip inside of Item doesn't render

Created on 10 Feb 2017 · 7Comments · Source: ionic-team/ionic-framework

Ionic version: (check one with "x")
[ ] 1.x
[ x] 2.x

I'm submitting a ... (check one with "x")
[x ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
When placing ion label (which is a part of ion chip) inside ion item, the item remove all text.

Expected behavior:
ion label inside ion item should work so we can put chips inside ion item.

Steps to reproduce:
Place ion label inside ion chip

For Ionic 1 issues - http://plnkr.co/edit/Xo1QyAUx35ny1Xf9ODHx?p=preview

For Ionic 2 issues - http://plnkr.co/edit/z0DzVL?p=preview
-->

Related code:

<ion-list>
<ion-item>
<ion-chip>
<ion-label>My chip label</ion-label>
</ion-chip>
</ion-item>

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Ionic 2.0.1

Source

theunreal

👍4

Most helpful comment

This scenario also does not work:

<ion-item>
      <ion-chip item-left color="primary">
        text
      </ion-chip>
</ion-item>

dylanvdmerwe on 23 Mar 2017

👍2 🎉1

All 7 comments

Hello! While we appreciate you opening an issue with us i am going to close this issue and ask that you open a new one that has the issue template filled out please. Thanks for using Ionic!

jgw96 on 10 Feb 2017

This scenario also does not work:

<ion-item>
      <ion-chip item-left color="primary">
        text
      </ion-chip>
</ion-item>

dylanvdmerwe on 23 Mar 2017

👍2 🎉1

This is still the case for ionic 3.6.0

The following does not render

<ion-col>
    <ion-chip>
        <ion-label>Default</ion-label>
    </ion-chip>
</ion-col>

however, this will render:

<ion-col>
    <ion-chip>
        Default
    </ion-chip>
</ion-col>

$ ionic info

cli packages:

    @ionic/cli-plugin-cordova       : 1.5.0 
    @ionic/cli-plugin-ionic-angular : 1.4.0 
    @ionic/cli-utils                : 1.6.0 
    ionic (Ionic CLI)               : 3.6.0 

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 2.1.3
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.6.0

System:

    Android SDK Tools : 24.4.1
    Node              : v7.5.0
    OS                : macOS Sierra
    Xcode             : Xcode 8.0 Build version 8A218a 
    ios-deploy        : 1.9.1 
    ios-sim           : 5.0.13 
    npm               : 4.1.2

Peter-Piper on 1 Aug 2017

Unfortunately, this is related to the content projection in item and will not be fixed in a minor/patch release. We will have this working for the v4 release. Please see my comment here for some more information: https://github.com/ionic-team/ionic/issues/12252#issuecomment-317062521

brandyscarney on 7 Aug 2017

<ion-col> <ion-chip class="chip1"> <ion-label>Monthly</ion-label> </ion-chip> </ion-col>

This works now

disujha on 22 Feb 2018

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!