Arrange css with ion-col

@HamdySdiri wrote:

I’m adjusting the style of the collar
But I can not get a good screen
can someone help me ?

<ion-item-group>
    <ion-item-divider color="light" no-lines> <span class="title-ion-item-divider"> Type de prélèvement: </span></ion-item-divider>
    <ion-list>
      <ion-item>
        <ion-row>
          <ion-col col-4>
            Référence prélèvement
          </ion-col>
          <ion-col col-3>
            Type de prélèvement
          </ion-col>
          <ion-col col-3>
            Repérage
          </ion-col>
          <button ion-button round outline icon-only (click)="addNewRow()">
             <ion-icon ios="ios-add" md="md-add"></ion-icon>
          </button>
        </ion-row>
      </ion-item>
    </ion-list>

    <ion-list>
      <form [formGroup]="myForm" novalidate  >

        <div formArrayName="prelevements">
          <div *ngFor="let address of myForm.controls.prelevements.controls; let i=index" class="panel panel-default">
            <div>
              <div class="textAlign" [formGroupName]="i">
                <ion-row class="textAlign">
                  <ion-col col-4>
                    <ion-input formControlName="ref"  type="text" placeholder="Référence prélèvement "></ion-input>
                  </ion-col>
                  <ion-col class="typePrelevement" col-3>
                    <ion-input formControlName="type"  type="text" placeholder="Type de prélèvement"></ion-input>
                  </ion-col>
                  <ion-col col-3>
                    <ion-input formControlName="reperage" type="text" placeholder="Reparage"></ion-input>
                  </ion-col>
                  <ion-col class="marginTopRemoveButton" col-2>
                    <span *ngIf="myForm.controls.prelevements.controls.length > 1" (click)="removePrelvement(i)"> <ion-icon ios="ios-close" md="md-close"></ion-icon></span>

                  </ion-col>
                </ion-row>
              </div>
            </div>
          </div>
        </div>
      </form>
    </ion-list>
  </ion-item-group>

Posts: 2

Participants: 2

Read full topic