CODEWITHSUNDEEP
htmlangulartypescriptionic-frameworkionic2
Sivakumar Tadisetti
Sivakumar Tadisetti

Reputation: 5031

How to align ion-inputs one by one in ion-list

I am new to Ionic framework - (Using Ionic framework 3)

<ion-row>
      <ion-col>
        <ion-list inset>
            <ion-item>
                <ion-input name="products" id="" type="text" required></ion-input><br>
                <ion-input name="products" id="" type="text" required></ion-input><br>
            </ion-item>
        </ion-list>
      </ion-col>
</ion-row>

Above ionic html code generating input fields side by side. But I want input fields one after the other

Please refer attachment that tells about my issue.

Please guide me through the correct way. Thank you. Issue image

Upvotes: 0

Views: 423

Answers (1)

matthiasunt
matthiasunt

Reputation: 719

Simply put each input field in a single ion-item, as described in the Ionic docs:

<ion-row>
  <ion-col>
    <ion-list inset>
      <ion-item>
        <ion-input name="products" id="" type="text" required></ion-input>
      </ion-item>
      <ion-item>
        <ion-input name="products" id="" type="text" required></ion-input>
      </ion-item>
    </ion-list>
  </ion-col>
</ion-row>

Upvotes: 1

Related Questions