Ion-grid align

Ionic Framework ionic-v3
1

Hello there,

i’ve got some trouble with my grid:

grid
grid.PNG722×661 12.8 KB

this is the code:

 <ion-grid>
    <ion-row align-items-center>
      <ion-col col-2>
        <ion-list *ngFor="let item of data">
          <h1>{{item.positionCount}}</h1>
        </ion-list>
      </ion-col>
      <ion-col col-4>
        <ion-list *ngFor="let item of data">
          <button class="item-button" ion-item  (click)="itemSelected(item)">
            <h2>{{item.requestRecipientDisplayName}}</h2>
            <p>{{item.servicesDescription}}</p>
            <p>{{item.price==null? '' : item.price + ' EUR'}} </p>
          </button>
        </ion-list>
      </ion-col>
    </ion-row>
  </ion-grid>

I want, that the numbers on the left stand right before the buttons on the right, so the “1” in front of the “sheppard” and so on.

how can i do this?

thanks in advance

2

I think you want something like this.

  <ion-grid>
    <ion-list *ngFor="let item of data">
      <ion-row align-items-center>
        <ion-col col-2>
            <h1>{{item.positionCount}}</h1>
        </ion-col>
        <ion-col col-4>
          <button class="item-button" ion-item  (click)="itemSelected(item)">
            <h2>{{item.requestRecipientDisplayName}}</h2>
            <p>{{item.servicesDescription}}</p>
            <p>{{item.price==null? '' : item.price + ' EUR'}} </p>
          </button>
        </ion-col>
      </ion-row>
    </ion-list>
  </ion-grid>
3

Yeah

thank you very much