Help with positioning of fields in list item

@bassfan wrote:

I have a list with a bunch of input fields. One of them is a weight, in pounds (lbs) and ounces (oz). These inputs should be in the same row as represented by the "11"s in the image below. I have it close, but I can’t seem to figure out how to get them to match the other labels/inputs above and below in the list. The most obvious thing is I can’t seem to wrap this in <ion-item>. Anytime I do, nothing is shown at all in that list item. However if I remove it, it looks like the below. I only need max two digits for the “oz” input and max three digits for the “lbs” input.

Here is what I want it to look like, plus the text sizes should match the other list items. I imagine if I can just get the ion-item tags in there, that will solve that though.

Can anyone offer a suggestion?

Here is the relevant snippet from my html.

          <ion-grid no-padding>
            <ion-row justify-content-center align-items-center style="height: 100%">
              <ion-col col-6>
                <ion-label>Weight</ion-label>
              </ion-col>
              <ion-col>
                <ion-input type="number" [(ngModel)]="lb" text-right></ion-input>
              </ion-col>
              <ion-col>
                <ion-label>lb</ion-label>
              </ion-col>
              <ion-col>
                <ion-input type="number" [(ngModel)]="oz" text-right></ion-input>
              </ion-col>
              <ion-col>
                <ion-label>oz</ion-label>
              </ion-col>
            </ion-row>
          </ion-grid>

Posts: 2

Participants: 1

Read full topic