Ion-input not showing when its inside a ion-col and as a item from a ion-list

Ionic Framework ionic-v3
1

I have this code, that doesn’t show anything:

<ion-list>
      <ion-item>
          <ion-grid>
            <ion-row>
                <ion-col col-3><ion-input type="text" value=""></ion-input></ion-col>
                <ion-col col-3><ion-input type="text" value=""></ion-input></ion-col>
                <ion-col col-3><ion-input type="text" value=""></ion-input></ion-col>
                <ion-col col-3><ion-input type="text" value=""></ion-input></ion-col>
            </ion-row>
          </ion-grid>
      </ion-item>
  </ion-list>

Every other combination of this elements works perfectly, and in the same page. What could be the problem?

2

@chrisbodon You can try to use the ion-item html properties, like item-content, to allow elements aside from labels and inputs inside it:

<ion-list>
      <ion-item>
          <ion-grid item-content>
            <ion-row>
                <ion-col col-3><ion-input type="text" value=""></ion-input></ion-col>
                <ion-col col-3><ion-input type="text" value=""></ion-input></ion-col>
                <ion-col col-3><ion-input type="text" value=""></ion-input></ion-col>
                <ion-col col-3><ion-input type="text" value=""></ion-input></ion-col>
            </ion-row>
          </ion-grid>
      </ion-item>
  </ion-list>

Just place item-content in the element directly inside the ion-item.

You can check in your browser inpector to see if your code is placed inside the ion-item in the generated HTML.

More information about ion-item here.

5 Likes
3

It worked! Thank you very much. The only problem I see right now, is that when I click on one of the inputs, the focus works in all them at the same time, not just in the selected one.

image
Untitled-1.png1263×926 3.78 KB

4

@chrisbodon I think it’s because all of them are inside ion-item, I think its better to use 1 ion-item per input, something like:

<ion-list>
	<ion-grid>
		<ion-row>
			<ion-col ion-item col-3><ion-input type="text" value=""></ion-input></ion-col>
			<ion-col ion-item col-3><ion-input type="text" value=""></ion-input></ion-col>
			<ion-col ion-item col-3><ion-input type="text" value=""></ion-input></ion-col>
			<ion-col ion-item col-3><ion-input type="text" value=""></ion-input></ion-col>
		</ion-row>
	</ion-grid>
</ion-list>

In this case each ion-col will behave like ion-item (or, alternatively, you could place the ion-item inside the ion-col, and ion-input inside it).

5

thanks, I stuck here for many hours

6

this worked for me!!!