Ion label and ion input is not side by side

Ionic Framework ionic-v3
1

Hi community, I am having this code

<ion-item *ngFor="let att of anArray; let idx = index">
      <ion-label color="primary" floating>{{att.labelA}}{{idx+1}}</ion-label>
      <ion-input type="text" [(ngModel)]="anArray[idx].valueA" clearInput></ion-input>

      <ion-label color="primary" floating>{{att.labelB}}{{idx+1}}</ion-label>
      <ion-input type="number" [(ngModel)]="anArray[idx].valueB" clearInput></ion-input>

      <ion-label color="primary" floating>{{att.labelC}}{{idx+1}}</ion-label>
      <ion-input type="text" [(ngModel)]="anArray[idx].valueC" clearInput></ion-input>
</ion-item>

But why does the output become

A1
B1
C1

I wanted to be like

A1

B1

C1

Thankyou.

2

put your code inside <ion-list> </ion-list>

3

Apologise, I did put ion-list directive

  <ion-list>
    <ion-list-header>
        Input list:
    </ion-list-header>

<ion-item *ngFor="let att of anArray; let idx = index">
      <ion-label color="primary" floating>{{att.labelA}}{{idx+1}}</ion-label>
      <ion-input type="text" [(ngModel)]="anArray[idx].valueA" clearInput></ion-input>

      <ion-label color="primary" floating>{{att.labelB}}{{idx+1}}</ion-label>
      <ion-input type="number" [(ngModel)]="anArray[idx].valueB" clearInput></ion-input>

      <ion-label color="primary" floating>{{att.labelC}}{{idx+1}}</ion-label>
      <ion-input type="text" [(ngModel)]="anArray[idx].valueC" clearInput></ion-input>
</ion-item>

  </ion-list>

I want it to be a label and then input subsequently.

4

well, i see now what you did wrong, you have to understand how is *ngFor working, or how is loop working in general

try this:

 <ion-list>
    <ion-list-header>
        Input list:
    </ion-list-header>

<ion-item *ngFor="let att of anArray; let idx = index">
      <ion-label color="primary" floating>{{att.label}}{{idx+1}}</ion-label>
      <ion-input type="text" [(ngModel)]="att.value" clearInput></ion-input>
</ion-item>

  </ion-list>

i have a bad feeling that your array is badly made and it won’t work anyway

5

Hi, thankyou for your help. Yes this is my start base when creating as this method I got from another ionic question. I have an add button to add more field whenever is neccessery thus, I added more field too

6

your array is anArray what are the field names of this?

7 
Add(key) {
    this.anArray.push({
      labelA: 'A', valueA: '', labelB: 'B', valueB: '',
     labelC: 'C', valueC: ''
    });
  }
8

well…you make a single set of data this way, try this:

    this.anArray = [
      { label: 'A', value: 'A' },
      { label: 'B', value: 'B' },
      { label: 'C', value: 'B' }
    ];

and then try the code i wrote a few posts above

9

I am trying on dynamic input field. this link Dynamic adding new input field thus thats why I am having pushing. Does it happen the way it is?

10

The solution from “Suraj Rao” in Stackoverflow

It is because you have wrapped them in a single ion-item which makes sets them in a single row.

You need to set as separate ion-item for each label and input. You can use ng-container for the for loop if you don't need additional divs in the HTML.

<ng-container *ngFor="let att of anArray; let idx = index">
<ion-item>
      <ion-label color="primary" floating>{{att.labelA}}{{idx+1}}</ion-label>
      <ion-input type="text" [(ngModel)]="anArray[idx].valueA" clearInput></ion-input>
</ion-item>
<ion-item>
      <ion-label color="primary" floating>{{att.labelB}}{{idx+1}}</ion-label>
      <ion-input type="number" [(ngModel)]="anArray[idx].valueB" clearInput></ion-input>
</ion-item>
<ion-item>
      <ion-label color="primary" floating>{{att.labelC}}{{idx+1}}</ion-label>
      <ion-input type="text" [(ngModel)]="anArray[idx].valueC" clearInput></ion-input>
</ion-item>
</ng-container>