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>