Horizontally aligning different types of material form control components

Question

I'm trying to horizontally align the radio/checkboxes in different types of Angular Material form controls in a list. The list is a mix of mat-list-option, mat-checkbox and mat-radio-button. I need the labels to be left aligned while the checkbox/radio buttons to be right aligned.

I've tried using fxLayouts "row" and "space-between" without luck. I've also tried to tamper with the css but cannot seem to get it right. I've created a StackBlitz for it: https://stackblitz.com/edit/material-6-kj87kz

<mat-selection-list>
  <ng-container *ngFor="let text of texts">
    <mat-list-option [checkboxPosition]="'after'">
      {{ text }}
    </mat-list-option>
    <div style="padding: 0 16px">
      <mat-checkbox *ngIf="isCheckbox" fxLayout="row" fxLayoutAlign="space-between center">
        {{ text }}
      </mat-checkbox>
      <mat-radio-group *ngIf="isRadioGroup" fxLayout="column" fxLayoutAlign="space-between center">
        <mat-radio-button *ngFor="let subText of subTexts" fxLayout="row" [labelPosition]="'before'">
        {{ subText }}
        </mat-radio-button>
      </mat-radio-group>
    </div>
  </ng-container>
</mat-selection-list>

Notice that I've removed bindings, conditions and actions from the code to keep it simple. This is what I currently get:

As you can see, I struggle to get the controls aligned. Do anyone know of a good approach on how to accomplish this?

StackBlitz: https://stackblitz.com/edit/material-6-kj87kz

Poul Kruijt Poul Kruijt · Accepted Answer · 2019-01-09T08:13:43

You have to utilize the ::ng-deep selector to change the css from the form checkbox and radio components. With a bit of flex and space-between, this is the result:

stackblitz

.mat-checkbox,
.mat-radio-group {
  height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
}

:host ::ng-deep .mat-checkbox-layout {
  display: flex;  
  width: 100%;
  justify-content: space-between;
}

:host ::ng-deep .mat-checkbox-label-before .mat-checkbox-inner-container {
  margin-right: 0;
}

.mat-radio-group {
  align-items: flex-start;
  flex-direction: column;
}

.mat-radio-button {
  width: 100%;
  height: 48px;

  display: flex;
  align-items: center;
}

:host ::ng-deep .mat-radio-label {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

Horizontally aligning different types of material form control components

1 Answers