ionic: label input label input in one line

Question

Using Ionic, I want to put one label with an input and then another label with an input right after them, all in the same line.

I did the following

<ion-item>
      <ion-label>I bought</ion-label>
      <ion-input type="number" min=0.1 value=1></ion-input>
      <ion-label>items for $</ion-label>
      <ion-input type="number" min=0.1 value=0.1></ion-input>
</ion-item>

For some reason, I have the 2 labels together and only then the 2 inputs together. In the same line though. How come the order got mixed up and how can I make them in the correct order?

Shreyas Pednekar Shreyas Pednekar · Accepted Answer · 2018-05-11T07:21:30

Copy paste this. This will work.

<ion-grid>
    <ion-row>
        <ion-col>
            <ion-label>I bought</ion-label>
        </ion-col>
        <ion-col>
            <ion-input type="number" min=0.1 value=1></ion-input>
        </ion-col>
        <ion-col>
            <ion-label>items for $</ion-label>
        </ion-col>
        <ion-col>
            <ion-input type="number" min=0.1 value=0.1></ion-input>
        </ion-col>
    </ion-row>
</ion-grid>

ionic: label input label input in one line

1 Answers