3

I need to show two input field inside a row look like:

enter image description here

But when I use :

<ion-list>
<ion-item>
  <ion-label stacked> Phone Number</ion-label>
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-input type="tel" placeholder="Area code"></ion-input>
      </ion-col>
      <ion-col>
        <ion-input type="tel" placeholder="Number"></ion-input>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-item>

But it not show any thing screen like:

enter image description here

Please help me.

Sampath
  • 63,341
  • 64
  • 307
  • 441
Neotrixs
  • 2,495
  • 4
  • 28
  • 58

3 Answers3

9

Please try to add ion-row before the ion-item. I hope this may help you. Thanks

<ion-list>

  <ion-label stacked> Phone Number</ion-label>

    <ion-row>
    <ion-item col-6>
        <ion-input type="tel" placeholder="Area code"></ion-input>
    </ion-item>
    <ion-item col-6>
        <ion-input type="tel" placeholder="Number"></ion-input>
    </ion-item>
    </ion-row>

</ion-list>
Saalim Mohammad
  • 91
  • 3
1

Personally, I wouldn't recommend creating a grid inside every item in the list ... can be really heavy to process.

But looking at your code, I see you only wanted to divid the row into two so each input will be next to each other..

So this simply worked for me (https://ionic-list-items-with-two-inputs-in-row.stackblitz.io/)

<ion-content padding>
  <ion-list>
    <ion-label stacked> Phone Number</ion-label>
    <ion-item>      
      <ion-input type="tel" placeholder="Area code"></ion-input>
      <ion-input type="tel" placeholder="Number"></ion-input>
    </ion-item>
  </ion-list>
</ion-content>
Ricky Levi
  • 7,298
  • 1
  • 57
  • 65
0

You just need to use <ion-grid> as shown below.

This is working stackblitz 

<ion-content>
    <ion-grid>
        <ion-row>
            <ion-col col-4>
                <ion-label stacked> Phone Number</ion-label>
            </ion-col>
            <ion-col col-4>
                <ion-input type="tel" placeholder="Area code"></ion-input>
            </ion-col>
            <ion-col col-4>
                <ion-input type="tel" placeholder="Number"></ion-input>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-content>
Sampath
  • 63,341
  • 64
  • 307
  • 441