ion-label is not displaying whole text in Ionic2
UPDATE
You can also set the text-wrap
attribute in the ion-card
like this
<ion-card text-wrap *ngFor="let product of products">
...
</ion-card>
Bonus tip: If you put text-wrap
(as an attribute, not as a class) in an ion-list
, all items in that list will have the text-wrap
effect applied. This way you don't need to put the text-wrap
attribute in all items and this will help you making your app slightly optimized.
Old answer:
You can use a ion-textarea
(disabled) to show the description. Find more information about the ion-textarea element here.
<ion-card *ngFor="let product of products">
<img [src]="product.imageURL" />
<ion-card-content>
<ion-card-title primary>{{ product.title }}</ion-card-title>
<ion-item>
<ion-label primary>Description</ion-label>
<ion-textarea rows="6" disabled [value]="product.description"></ion-textarea>
</ion-item>
</ion-card-content>
</ion-card>
The rows
attribute allows you to set how many rows do you want to show, according to how long the text of the description is. By using the disable
attribute, the ion-textarea
is similar to a label
, but showing more than one line of content. And last but not least, I use the value
attribute to set the content of the element with the product's description.
A few comments about your code:
You're opening two
ion-item
elements, but closing only one of them<ion-item class="item-text-wrap"> <ion-item> <!-- ... --> </ion-item>
Instead of using the
[innerHTML]
attribute binding with the product title, you can just use interpolation<ion-card-title primary>{{ product.title }}</ion-card-title>