Arrange css with ion-col

Ionic Framework ionic-v3
1

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>

questioncss

2

Hey @HamdySdiri,

try this:

.croix {
    display: flex;
    align-items: center;
    justify-content: center
  }

 <ion-col class="croix" col-2 (click)="removePrelvement(i)">
     <ion-icon icon-only ios="ios-close" md="md-close"></ion-icon>
 </ion-col>
3

Thank you for your reply
it’s basically the same result as i mentioned

4

You should be doing something in component sass file. Can you provide it?

5 
     ion-row {
        text-align: center;
    }
    ion-input{
        text-align: center;
    }
    .marginTopRemoveButton{
        margin-top: 15px!important;
    }
    .text-input-md {
    margin: 12px 40px !important;
    }
    .typePrelevement{
        margin: 12px 12px !important;
    }
    .croix {
    display: flex;
    align-items: center;
    justify-content: center
  }
6

@HamdySdiri,

Please comment all those CSS code and just leave the one did:

// ion-row {
  //       text-align: center;
  //   }
    // ion-input{
    //     text-align: center;
    // }
    // .marginTopRemoveButton{
    //     margin-top: 15px!important;
    // }
    // .text-input-md {
    // margin: 12px 40px !important;
    // }
    // .typePrelevement{
    //     margin: 12px 12px !important;
    // }
    .croix {
    display: flex;
    align-items: center;
    justify-content: center
  }

<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 novalidate  >
        <div>
          <div class="panel panel-default">
            <div>
              <div class="textAlign">
                <ion-row class="textAlign">
                  <ion-col col-4>
                    <ion-input  type="text" placeholder="Référence prélèvement "></ion-input>
                  </ion-col>
                  <ion-col class="typePrelevement" col-3>
                    <ion-input type="text" placeholder="Type de prélèvement"></ion-input>
                  </ion-col>
                  <ion-col col-3>
                    <ion-input type="text" placeholder="Reparage"></ion-input>
                  </ion-col>
                  <ion-col class="croix" col-2 (click)="removePrelvement(i)">
                    <ion-icon ios="ios-close" md="md-close"></ion-icon>
                  </ion-col>
                </ion-row>
              </div>
            </div>
          </div>
        </div>
      </form>
    </ion-list>
  </ion-item-group>

I took away all the formgroup and formcontrols, you just have to put them back

1 Like