Ionic 6 IonInput outlined height

Ionic Framework Ionic React
1

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

2

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

1 Like
3

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
4

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?

5

That wasnt enlarging it, but making it smaller. I wanted to make it similar to input we were using in other app

6

Try giving the ion-input a CSS class, for example

class=“input”

then in the CSS apply your changes

.input{
height: ‘40px’;
}

I think this should work