Input and select in one line

[LoLStats]

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

[LoLStats]

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

[CurtisDrumeo]

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.

[LoLStats]

Thank you Not it is working well

[lannie]

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.

[drquochoai]

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

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

[Hemang]

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;
}