Paragraph is not doing a new line after it doesn't fit the card || ion-card & ion-card-content issues

Ionic Framework ionic-v3
1

Hi, I am having an issue using the ion-card component. When writing a paragraph when getting close to the end of the card (the border of the card, don’t know how to express differently as I am not a native speaker) instead of making a new line it just continues writing in a way where it just doesn’t make a new line. I used the ion-card-content inside my <p> but it doesn’t do anything. Please help!!!
the code:

<ion-list no-lines>
  <ion-list-header>
    Pasos a seguir
  </ion-list-header>
  <ion-item *ngFor="#paso of info.receta.pasos; #i = index">
    <ion-card-content>
      <p>{{i + 1 +': ' + paso}}</p>
    </ion-card-content>
  </ion-item>
</ion-list>

the result:

image

2

Not sure, but I think you need to explicitly set the text to wrap by using the item-text-wrap style.

<ion-card-content class="item item-text-wrap">
<p>long text</p>
</ion-card-content>
3

add in your template style="text-overflow:ellipsis;" this may be helpfull

4

I would recommend removing the ion-card-content as this adds some unnecessary CSS & then adding the text-wrap attribute to the ion-item:

<ion-item *ngFor="#paso of info.receta.pasos; #i = index" text-wrap>
  <p>{{i + 1 +': ' + paso}}</p>
</ion-item>
5 Likes
5

Aside as far as i could tell the ion-card-content was made to go inside an ion-card tag, maybe @bandito wanted to use a list of cards?

6

I’m not sure, I just assumed the ion-list was inside of an ion-card…but it could be missing completely. Either way, putting multiple ion-cards inside of an ion-list isn’t recommended. Lists are really for styling items.

7

Yep, i don’t see the need of list if it’s a collection of cards, but if it’s not that then that ion-card-content doesn’t belong there.

8

What I wanted to show was a ion list inside and ion card. Each recipe has a list of ingredients and a list of steps “pasos”. I will try what you guys told me when I arrive at home.

EDIT: Just tried the “text-wrap” and that works great.

@Luchillo: What I wanted to do was two have a card with a picture, name of recipe, list of ingredientes and list of Steps. That’s why I have coded that way.

image

9

Then there’s no reason to put a tag of ion-card-content inside the list of ‘pasos’, you should just wrap the entire list with a card and put the image just upside the list, that way the card will take care of the image’s size.

Btw do you speak spanish? seems you’re making an app for deploy in Spain or South America.

10

I had it as this

<ion-card>
   <ion-card-content>
...
...
....
</ion-card-content>
</ion-card>

as per the documentation. But yeah I took it out because it didn’t do anything important.

Yeah I speak Spanish, if I deployed the app it would be Puerto Rico since I am from there or maybe South America because there is a bigger population there. But I don’t plan to release the app, I was just playing with the ionic2 framework. I did this for a computer class I took for ionic 1 and decided to remake this from the start in order to learn Angular2. I learn Angular 1 that way, just making an app (I did the angularjs.org tutorial app completely in ionic 1 changing a lot of stuff like the routing back in the day).

11

I’m from Colombia, i’m almost ready to deploy an app in the Apple App Store and Google Play, i keep speaking english by respect the other forum members that most speak english.

12

It’s better to do that as this website is mostly for English speakers made by English speakers.

Ionic deberia firmar gente para darle soporte (support) para los de habla hispana jajaja

13

That shouldn’t do, a forum just for other language would cut the support in two as the English speakers wouldn’t bother searching answers in the Spanish forum, it’s better to have only one forum and all speaking the same language.

Es una pena pero el lenguaje mas hablado es el ingles, no tiene gracia repetir temas en español y que la solucion este repetida en varios lenguajes :sweat_smile:.

14

Muy cierto. Se pierde mucha informacion de esa manera

15

This does the magic for me…

<ion-list> <ion-card *ngFor="let som of something"> <ion-card-header> {{som.header}} </ion-card-header> <ion-card-content style="white-space: pre-line;"> <p>{{som.longbody}}</p> </ion-card-content> </ion-card> </ion-list>

3 Likes
16

thank its work…