[Ionic 4] Changes in Multi-line list

Ionic Framework ionic-v3
1

I’m trying to implement some itens in a page with the “multi-line” option, like the examples provided in documentation:

example 1;
example 2;

As the documentation says: “When an <ion-item> component contains multiple header or paragraph elements, it will automatically expand it’s height to fit the new lines of text.” Clearly this was changed in Ionic 4, since the elements stands side by side now.

What I’m trying to do (the doc example):

<ion-list>
  <ion-item>
    <ion-thumbnail slot="start">
      <img src="assets/img/totoro.png">
    </ion-thumbnail>
    <h2>This looks cooler</h2>
    <p>Hayao Miyazaki • 1988</p>
    <ion-button clear slot="end">View</ion-button>
  </ion-item>
</ion-list>

What it looks like:

image

If someone have a workaround for this I will appreciate.

2

If you are using Ionic 4, you will need to wrap your h2, p and button in an ion-label and things should be as expected.

4 Likes