Problem using text-wrap and ion-item

Ionic Framework ionic-v3
1

Ok, this allows text to wrap:

<ion-item text-wrap>
	add your text here it will wrap it 
</ion-item>

In my .ts file, i have a list of sortable card, but using an <ion-item> inside the card-list, problems arise.

image
no.jpg1200×396 36.4 KB

Why the <ion-item> inside my card has the (ionItemReorder)="reorderItems($event)" ?
Ok the gray background, cause off .scss.

That’s my .ts file:

 <ion-content class="paginaListeDellaSpesa">
    <ion-list no-lines reorder="true" (ionItemReorder)="reorderItems($event)">
        <ion-item *ngFor="let lista of elencoListe">
            <ion-card>             
                <ion-grid>

                    <ion-row>
                        <ion-col width-75>
                            <ion-card-content>
                                <ion-card-title>
                                    {{lista.titolo}}
                                </ion-card-title>
				<ion-item>
                                        Descrizione: {{lista.descrizione}}
				</ion-item>
                                <p>Frequenza: {{lista.frequenza}}</p>
                            </ion-card-content>
                        </ion-col>

                        <ion-col width-25>
                            <img src="{{lista.userImg}}" class="imgLista" />
                        </ion-col>
                    </ion-row>        
                  
                    <ion-row>
                        <ion-col>
                            <button clear small danger (click)="goTo($event)">
                            <ion-icon name='archive'></ion-icon>
                                Riempi
                            </button>
                        </ion-col>

                        <ion-col>
                            <button clear small danger (click)="editLista(lista)">
                            <ion-icon name='paper'></ion-icon>
                                Modifica
                            </button>
                        </ion-col>

                        <ion-col>
                            <button clear small danger (click)="deleteLista(lista)">
                            <ion-icon name='trash'></ion-icon>
                                Elimina
                            </button>
                        </ion-col>
                    </ion-row>

                </ion-grid>
            </ion-card>
        </ion-item>
    </ion-list>
</ion-content>

and my *.scss file:

image

if it were possible to add the text-wrap to other object, it would be perfect…
Like that (but without the wrap and the <ion-item> implemented):

image
si.jpg1200×362 34.2 KB

1 Like
2

You don’t need an ion-item just to use text-wrap. You can include it in a label.

<label text-wrap>
	add your text here it will wrap it 
</label>
2 Likes
3

I tried it, but if I remember correctly, it give some problems…
Tomorrow at work, i will try again and give some feedback :sweat:

4

@DeeM52, unfortunately it does not work your solution.
Hope that screenshot help to solve the problem.

.ts

image
image888×903 98.7 KB

screenshot from device

image
image1200×1920 99.9 KB

5

Tried with no luck:

<div class="item item-text-wrap">
    Text to wrap: {{lista.descrizione}}
</div>

image
div.jpg1200×769 71.8 KB

At least stops in the container… But it does not wrap,

6

What happens when you put text-wrap directly in the main ion-item?

<ion-item *ngFor="let lista of elencoListe" text-wrap>

4 Likes
7

Yes! I’m so dumb!

image
Screenshot_20160812-144038.png1200×1920 85.4 KB

8

or will cause the font-size to shrink??

your label attribute works or ion-label works, BRAVO! (ionic v3)

what a waste of time to have to chase for a default behavior like text “wrap around”
CSS and IONIC need another 20 years growth.