CODEWITHSUNDEEP
javascriptandroidcssangularjsionic-framework
FrancescoMussi
FrancescoMussi

Reputation: 21610

Ionic: How to display ion-item on multiple lines?

THE SITUATION:

I am using Ionic to build an app.

I need to display a list of info regarding some people. To obtain that i am using the ionic list <ion-list> along with <ion-item> since the layout it offers it is exactly what i need.

The only problem is that each <ion-item> seems to be forced to stay on a single line, cutting the extra text it contains, as shown it the picture:

enter image description here

THE CODE:

<ion-list>
    <ion-item class="item"> Name: <b> {{ person.name }} </b> </ion-item>
    <ion-item class="item"> Email: <b> {{ person.email }} </b> </ion-item>
    <ion-item class="item"> Title: <b> {{ person.title }} </b> </ion-item>
    <ion-item class="item"> Bio: <b> {{ person.bio }} </b> </ion-item>
</ion-list>

PLUNKER:

Here is a plunker that recreates the situation. You can try to resize the browser, or the internal windows, and you can see how ion-item cut out the extra content.

http://plnkr.co/edit/Qx9fYRpiATK4lgj5g5Rk?p=preview

THE QUESTION:

How can i display the extra content in a <ion-item> element?
Is it possible to display the content in multiple lines?

Upvotes: 23

Views: 45923

Answers (5)

Phil
Phil

Reputation: 767

In Ionic v4 you can attach the text-wrap attribute to the ion-label component inside an ion-item. For Instance: 

<ion-item>
  <ion-label text-wrap>
    Multiline text that should wrap when it is too long to fit on one line in the item.
  </ion-label>
</ion-item>

EDIT for Ionic v5: Ionic CSS attributes are deprecated and will not work in v5. replace attribute tags (e.g., <ion-label text-wrap>) with ionic classes (e.g., <ion-label class="ion-text-wrap">). For example:

<ion-item>
  <ion-label class="ion-text-wrap">
    Multiline text that should wrap when it is too long to fit on one line in the item.
  </ion-label>
</ion-item>

This will also work for v4

Upvotes: 28

carpiediem
carpiediem

Reputation: 2038

EDIT: Although marked as accepted, this answer was written for an early version of Ionic. Odds are, you'll want one of the answers below for the newer versions.

Class item-text-wrap should help you out, like this:

<ion-item class="item item-text-wrap">
  bio: <b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </b>
</ion-item>

Upvotes: 43

Ari Waisberg
Ari Waisberg

Reputation: 1304

Those solutions only work if you have 2 lines... If you have many lines and you want to show them all, add this to the scss of the component:

.item-block {
    height: auto;
}

.item-ios.item-block .item-inner {
    height: auto;
}

Upvotes: 0

Amit Gupta
Amit Gupta

Reputation: 17658

For Ionic 2 users, you can use text-wrap attribute as:

<ion-item text-wrap>
  Multiline text that should wrap when it is too long to fit on one line in the item.
</ion-item>

You can also see the Utility Attributes Documentation for attributes that can be added to ion-item to transform the text.

Upvotes: 63

Mark Veenstra
Mark Veenstra

Reputation: 4739

You should overwrite the default CSS added to the specific <ion-item>, for example, change:

<ion-item class="item">
    bio: <b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </b>
</ion-item>

To:

<ion-item class="item" style="white-space: normal;">
    bio: <b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </b>
</ion-item>

Upvotes: 3

Related Questions