Question 195395 in Html Question posted in
Some basic documentation can be found here.

Html – How to move checkbox to right – Angular CSS

i’m a little new to the css part and i’m having trouble trying to move my checkbox block to the right and keep the other block on the left.

My checkbox

expected checkbox example

could you help me please?

HTML:

<mat-tab label="Permissões">
        <section>
          <h4>Modulos do Grupo de Segurança</h4>
          <hr />
          <form [formGroup]="form">
            <div class="modulecheckbox">
              <div *ngFor="let category of allCategories">
                <h4>{{ category.description }}</h4>
                <mat-checkbox
                  *ngFor="
                    let modules of filterItemsByCategory(
                      selectedAllModules,
                      category
                    )
                  "
                  [value]="modules.id.toString()"
                  >{{ modules.name }}
                  <div class="checkboxpermissions">
                    <mat-checkbox
                      [(ngModel)]="modules.read"
                      formControlName="read"
                      >Leitura</mat-checkbox
                    >
                    <mat-checkbox
                      [(ngModel)]="modules.write"
                      formControlName="write"
                      >Escrita</mat-checkbox
                    >
                    <mat-checkbox
                      [(ngModel)]="modules.delete"
                      formControlName="delete"
                      >Exclusão</mat-checkbox
                    >
                  </div>
                </mat-checkbox>
              </div>
             </div>
          </form>
        </section>
        <hr />
      </mat-tab>

My css:

.checkboxpermissions{
  display: inline-flex;
  justify-content: space-between;
}

..modulecheckbox{
  display: grid;
  flex-direction: row;

}
Tags:

2

Answers


  1. 0

    You can use flex instead of inline-flex and set the grow property of the first child:

    .checkboxpermissions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

.checkboxpermissions mat-checkbox:first-child {
  flex-grow: 1;
}

    here is an example: stackblitz

    Login or Signup to reply.
  2. 0

    It’s not necessary to add a grid layout. A simple flex will do, but you need to properly use align to flex end and add a margin to the first column. Maybe this example helps:
    https://codesandbox.io/s/heuristic-sound-3w38k9?file=/index.html

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search