Ionic 6 IonInput outlined height

Hello,
Im trying to make ionic input height of 40px,
I have a structure like so:

<IonItem fill="outline" >
    <IonLabel position="floating">
        Some label
    </IonLabel>
    <IonInput
        value={value}
        onIonChange={onChange}
    />
</IonItem>

i was Trying to set the css like this:

ion-item,
ion-input {
  height: 40px !important;
  --min-height: 0;
  padding: 0 !important;

  input {
    height: 16px !important;
    min-height: 0 !important;
    padding: 0 !important;

  }
}

but the floating label when there is no text, is moving loo low and sitting on the bottom border. I was trying different approaches but couldn’t make it work and there are no useful info in the docs.

Please help me, I’ll be grateful

1 post - 1 participant

Read full topic