Contents in ion item not wrapping to next line

I want to put some content o next line inside the ion-item but this doesn’t seems to be working.
I actually want the price to be on next line. and trash icon on right side
already tried ion-text-wrap and other thing, but still in vain.
here is how I’m trying


        <ion-col size="12">


                <ion-item *ngFor="let product of cart">

                    <ion-avatar [routerLink]="['/product-detail',]">

                        <!-- <ion-thumbnail> -->

                        <img src="{{product.images[0].src}}" />

                        <!-- </img> -->

                        <!-- </ion-thumbnail> -->


                    <ion-text [routerLink]="['/product-detail',]" style="margin-left: 20px;">


                    <hr />


                    <!-- <ion-text>{{product.price}}</ion-text> -->

                    <div class="offer-details">

                        <!-- <ion-button style="padding:unset !important"> -->

                        <ion-icon class='deleteIcon' name="trash" slot="icon-only"></ion-icon>

                        <!-- </ion-button> -->



                        Price: {{product.price}}







Thanks in advance to helping hands

Wrap the contents in ion-label.

IonItem is set to display flex by default. You need to wrap the items in an ion-label if you want them to break lines.

is there anyway I can check if any item is set to display flex by default ?

Fire up Chrome’s Developer Tools, select the element, and look at its display property.

1 Like