Ion-list with label and note - note in next like text is very large

[TCB13]

Hello,

I’m using the latest ionic in vanilla JS and it works out fine, however I’ve this piece of code to generate a list of items:

return `<ion-item>
                <ion-label>${name}</ion-label>
                <ion-note color="medium">${value}</ion-note>
            </ion-item>`;

It works fine in most cases, however sometimes the output note is very large resulting in this:

e

Is there a way to make it behave like native iOS where if it doesn’t fit the note will be displayed on a new line? Here’s the example from iOS settings:

Thank you.

[twestrick]

You could force it to always be two lines by applying position="stacked" to your ion-label.

Otherwise, you’ve gotta edit the Shadow DOM and apply flex-wrap: wrap. Here is a Vue example but should work for regular JS too.

Ionic - Wrap text in IonItem when too long - StackBlitz

<template>
  <ion-item>
    <ion-label>Basic Item</ion-label>
  </ion-item>

  <ion-item class="two-lines">
    <ion-label style="text-wrap: nowrap;">Multi-line #1</ion-label>
    <ion-note>84505078084186484968498498408940894089408940894089</ion-note>
  </ion-item>

  <ion-item class="two-lines">
    <ion-label style="text-wrap: nowrap;">Multi-line #2</ion-label>
    <ion-note>84505078084186484968498498408940894089408940894089</ion-note>
  </ion-item>
</template>

<script lang="ts" setup>
import { IonItem, IonLabel, IonNote } from '@ionic/vue';
import { onMounted } from 'vue';

onMounted(() => {
  const sheet = new CSSStyleSheet();
  sheet.replaceSync('.input-wrapper { flex-wrap: wrap; }');

  document.querySelectorAll('ion-item.two-lines').forEach((element) => {
    element.shadowRoot.adoptedStyleSheets.push(sheet);
  });
});
</script>

[TCB13]

@twestrick

position="stacked"

Stacked works, had to had a margin-bottom to the notes to make it look good.

The only thing missing was an option to stack dynamically like in native iOS.

Thank you for the tip!