Change width of Ion-Input label

Ionic Framework
1

I’m using 4 Ion-Inputs in a list. I want to line up all of the input values so it’s clean. That would mean updating the width of the label portion of the Ion-Input. Using class or inline styling, how can I change the width of the label of an Ion-Input?

    <IonCard>
      <IonCardHeader>
        <IonCardTitle>Cache Settings</IonCardTitle>
        <IonCardSubtitle>* in minutes</IonCardSubtitle>
      </IonCardHeader>
      <IonCardContent>
        <IonList>
          <IonItem>
            <IonInput
              label="Volunteer List:"
              labelPlacement="start"
              type="number"
              inputMode="numeric"
              required
              min={5}
              value={volunteerListExpiration}
              onIonChange={(e: any) =>
                handleSaveExpiration("volunteer", e.detail.value)
              }
            />
          </IonItem>
          <IonItem>
            <IonInput
              label="Family List:"
              labelPlacement="start"
              type="number"
              inputMode="numeric"
              required
              min={5}
              value={familyListExpiration}
              onIonChange={(e: any) =>
                handleSaveExpiration("family", e.detail.value)
              }
            />
          </IonItem>
          <IonItem>
            <IonInput
              label="Community List:"
              labelPlacement="start"
              type="number"
              inputMode="numeric"
              required
              min={5}
              value={communityListExpiration}
              onIonChange={(e: any) =>
                handleSaveExpiration("community", e.detail.value)
              }
            />
          </IonItem>
          <IonItem>
            <IonInput
              label="Campaign List:"
              labelPlacement="start"
              type="number"
              inputMode="numeric"
              required
              min={5}
              value={campaignListExpiration}
              onIonChange={(e: any) =>
                handleSaveExpiration("campaign", e.detail.value)
              }
            />
          </IonItem>
        </IonList>
      </IonCardContent>
    </IonCard>
2

A labelPlacement = 'fixed' doesn’t work for you?

“fixed”: The label has the same behavior as "start" except it also has a fixed width. Long text will be truncated with ellipses (“…”). (source)

3

I thought about using ‘fixed’ but the issue is the ellipses. I want to make the label width wide enough that there aren’t any ellipses. Is it even possible to increase the label portion of the IonInput?

4

A bit of a “hack”, but I used the following styles and it seems to work with a fixed label placement.

Here is the StackBlitz too. Please excuse that it is Vue :sweat_smile:

<style>
ion-input div.label-text-wrapper.sc-ion-input-ios,
ion-input div.label-text-wrapper.sc-ion-input-md {
  max-width: none;
  width: 400px;
}
ion-input div.label-text-wrapper div.label-text {
  text-overflow: unset;
  overflow: visible;
}
</style>
5

the “hack” worked beautifully! Thank you!

1 Like