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>