Multiline ion-item with ion-toggle

7
votes

Using Ionic 3.19.1. I want to create ion-items with one icon on the left, two lines on the middle and one ion-toggle at the end.

With two icons, it works perfectly:

two icons with two text lines

I did that with this code:

  <ion-list>
    <ion-item>
      <ion-icon name="american-football" item-start></ion-icon>
      <h2>prefs_transversal_products</h2>
      <p>prefs_transversal_products_desc</p>
      <!-- <ion-toggle color="secondary" item-end></ion-toggle>  -->
      <ion-icon name="american-football" item-end></ion-icon>
    </ion-item>
  </ion-list>

But if I enable the ion-toggle, the two lines of text disappear like this:

lines missing

What am I missing?

Thank you.

2
ionic-frameworkionic3

2 Answers

11
votes

I can reproduce your issue, not quite sure what's going on there. Might be a bug.

Anyway, wrapping your text in an <ion-label> solves the problem for me:

<ion-list>
    <ion-item text-wrap>
        <ion-icon name="american-football" item-start></ion-icon>
        <ion-label>
            <h2>prefs_transversal_products</h2>
            <p>prefs_transversal_products_desc</p>
        </ion-label>
        <ion-toggle color="secondary" item-end></ion-toggle>
    </ion-item>
</ion-list>

result

See the docs for advanced usage of <ion-item> for additional info.

0
votes

Use class="ion-text-wrap" if you have multiple lines:

<ion-label>
    <h2>test</h2>
    <p class="ion-text-wrap">
        A very big string
    </p>
</ion-label>