Input and select in one line

I want to place a select item on the left side of a input item.
I found a guide for iOnic 1, but under iOnic 2 it does not work well.

This does NOT work for me:

<ion-grid>
  <ion-row>
    <ion-col width-50>
      <ion-item class="custom-item-input">
        <ion-label floating>Weight</ion-label>
        <ion-input type="text" [(ngModel)]="weight"></ion-input>
      </ion-item>
    </ion-col>
    <ion-col width-50>
      <ion-item>
        <ion-label>Unit</ion-label>
        <ion-select [(ngModel)]="unit">
          <ion-option value="kg">Kilogram</ion-option>
          <ion-option value="lb">Pounds</ion-option>
        </ion-select>
      </ion-item>
    </ion-col>
  </ion-row>
</ion-grid>

Maybe you can help me :slight_smile:

2 Likes

Yea i’ve tried this, but the select is always a bit above the input (but on the same line).

The reason the right one is positioned higher than the left is because of the “floating” attribute on the text input. Either use a different attribute or remove it altogether. You could also put it on the label for the select input but that just looks awful in my opinion.

2 Likes

Thank you :slight_smile: Not it is working well

LoLStats, I presume from your smiley-face that you mean “Now it is working well” not “Not it is working well”. LOL indeed!

For others searching this topic, here is how I did it as a list item with a stacked label, not using ion-grid:

 <ion-list>
  <ion-item class="auth-time-label">
    <ion-label stacked primary>invalidate authorization token after</ion-label>
  </ion-item>
  <ion-item class="auth-time">
    <ion-input type="number" min="0" max="59" step="1"  side="left"></ion-input>
    <ion-select>
      <ion-option value="SEC">seconds</ion-option>
      <ion-option value="MIN">minutes</ion-option>
      <ion-option value="HOUR">hours</ion-option>
      <ion-option value="DAY">days</ion-option>
      <ion-option value="WEEK">weeks</ion-option>
    </ion-select>
  </ion-item>
</ion-list>

plus some css

 .auth-time-label {
  min-height: 24px;
  div.item-inner {
    border-bottom: none;
  }
}
.auth-time {
  div.item-inner {
    border-top: none;
    ion-input {
      width: 100px;
      input {
        text-align: right;
      }
    }
  }
  ion-select {
    width: 300px;
  }
}

This seems to do the job without too much violence to the intent of the directives.

Just add align-items-center to your ion-row.

<ion-row align-items-center></ion-row>
1 Like

Thanks for the heads up @drquochoai.
There was still some gap between the two elements after align-items-center,
so I did

<ion-row class="align-items-flex-end"></ion-row>
.align-items-flex-end {
    align-items: flex-end;
    -webkit-align-items: flex-end;
}

:tada: :tada:

34 AM