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

It looks like you may have to increase the ion-item height as well or instead. Try that
image
I put just the ion-item height to 80px and the results:
image

Im not sure if you understood me correctly, I want to make the input has 40px height what is less then default value, setting item height to 80px is not working. If somebody looking for any solution here is what i had to do to make it somehow work with all the floating label and stuff:

ion-item {
  height: 40px !important;
  --border-color: var(--ion-color-step-200);

  &.item-has-focus,
  &.item-has-value,
  &:focus {
    ion-label {
      transform: translateY(-10px) scale(0.75) !important;
    }
  }

  ion-input {
    transform: translateY(-10px);
  }

  ion-label {
    transform: translateY(8px) !important;
    font-size: 14px;
  }

  input,
  select {
    height: 16px !important;
  }

  ion-select {
    padding: 0;
  }

  ion-button {
    height: auto;
  }
}

ion-select,
ion-input {
  font-size: 14px;
}

these setting are for text input and for select

maybe there is a simplier way but i dont know it

1 Like

Sorry I misinterpret the question. I believe I had to do this with another framework. Can I ask why did you want to enlarge the input area? For the user experience?