Multiline ion-item with ion-toggle

Issue

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:

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:

What am I missing?

Thank you.

Solution

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>

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

Answered By - Phonolog