Contents in ion item not wrapping to next line

Ionic Framework Ionic Angular
1

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

        <ion-col size="12">

            <ion-list>

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

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

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

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

                        <!-- </img> -->

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

                    </ion-avatar>

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

                        {{product.name}}</ion-text>

                    <hr />

                    <br/>

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

                    </div>

                    <ion-label>

                        Price: {{product.price}}

                    </ion-label>

                </ion-item>

            </ion-list>

        </ion-col>

    </ion-row>

</ion-grid>

`
Thanks in advance to helping hands

screenshot
screenshot420×745 20.4 KB

2

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.

2 Likes
3

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

4

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

1 Like