Wrap ionic chips within ion-item Ionic 4

0
votes

I have a requirement where in i need to wrap ionic chips within ion-item of ion-list.

Below is the code for it.

<ion-content>
    <ion-list>
        <ion-item *ngIf="showLayout" class="wrapname">
            <ion-chip color="danger" item-content>
                <ion-label >Secondary Label</ion-label>
                <ion-icon name="close"></ion-icon>
            </ion-chip>
            <ion-chip color="danger" item-content>
                <ion-label >Secondary Label</ion-label>
                <ion-icon name="close"></ion-icon>
            </ion-chip>
            <ion-chip color="danger" item-content>
                <ion-label >Secondary Label</ion-label>
                <ion-icon name="close"></ion-icon>
            </ion-chip>
        </ion-item>
    </ion-list>
</ion-content>

Below is the scss code for it.

.wrapname{
    word-wrap: break-word;
    white-space: pre-wrap;
    width:100%;
}

I have used word-wrap,but still its not working.

Am i going wrong somewhere??

2
ionic-frameworkionic4
Please can you tell what's is the output or what's going wrong ? And what you want ? - Kishan Bharda
I just need to wrap the ion-chips to the next line within ion-item, which is not happening with the above code. - coder12349
Ok, so put each ion-chip to seprate ion-item. - Kishan Bharda
i want to show ionchips horizontally, say i have 5 chips, based on space place two chips in one line and move remaining to the next line. This is how i wanted. - coder12349
Ionic grid will help you to achieve this. Try to use ionic grid instead of ion-list. - Kishan Bharda

2 Answers

1
votes

You can simply achieve this with the help of *ngFor

Check below code :

.ts:

 items = ["Test","Test1","Test12","Test123", "Test1234", "Test12345", "Test123456", "Test1234567", "Test123456", "Test12345", "Test1234", "Test123", "Test12", "Test1", "Test"];

.html:

<ion-content padding>
    <ion-chip *ngFor="let item of items;" color="danger" item-content style="margin-left: 10px;">
        <ion-label > {{ item }}</ion-label>
        <ion-icon name="close"></ion-icon>
    </ion-chip>
</ion-content>

Will create a list of chips as below :

enter image description here

StackBiz Demo: https://stackblitz.com/edit/ionic-vscljq

Hope this will helps.

1
votes

In Ionic 4 to get <ion-chip> items to wrap inside of <ion-item>, you need to put them inside of a <ion-label text-wrap class="ion-text-wrap">. So in your example, you'd do the following:

<ion-content>
    <ion-list>
        <ion-item *ngIf="showLayout">
            <ion-label text-wrap class="ion-text-wrap">
                <ion-chip color="danger">
                    <ion-label>Secondary Label</ion-label>
                    <ion-icon name="close"></ion-icon>
                </ion-chip>
                <ion-chip color="danger">
                    <ion-label>Secondary Label</ion-label>
                    <ion-icon name="close"></ion-icon>
                </ion-chip>
                <ion-chip color="danger">
                    <ion-label>Secondary Label</ion-label>
                    <ion-icon name="close"></ion-icon>
                </ion-chip>
            </ion-label>
        </ion-item>
    </ion-list>
</ion-content>

I ran into this same problem and wrapping the ion-chip inside ion-label resolved the issue for me. 👍