垂直对齐 mat-checkbox 和 mat-form-field | Angular 材料 | Angular

Question

I am trying to implement text Fields and checkbox side by side. Something like this.

But, the problem is <mat-form-field> and <mat-checkbox> is not vertically aligning. How do I go forward by aligning both of them vertically?

Here is the code:

<mat-card>
    <mat-card-title>
        Family Information
    </mat-card-title>
    <form [formGroup]="familyInfo">
        <div fxLayout="row" fxLayoutAlign="flex-start" fxLayoutGap="40px">
            <mat-form-field fxFlex="10%">
                <mat-label>Contact Name</mat-label>
                <input matInput>
            </mat-form-field>
            <mat-form-field fxFlex="10%">
                <mat-label>Relation Type </mat-label>
                <mat-select>
                    <mat-option *ngFor="let relationType of relationTypes" [value]="relationType" color="accent">
                        {{relationType}}
                    </mat-option>
                </mat-select>
            </mat-form-field>
            <mat-form-field fxFlex="10%">
                <mat-label>Gender </mat-label>
                <mat-select>
                    <mat-option *ngFor="let gender of genders" [value]="gender" color="accent">
                        {{gender}}
                    </mat-option>
                </mat-select>
            </mat-form-field>
            <mat-form-field fxFlex="10%">
                <mat-label>Date Of Birth</mat-label>
                <input matInput [matDatepicker]="dateOfBirth" formControlName="dateOfBirth">
                <mat-datepicker-toggle matSuffix [for]="dateOfBirth"></mat-datepicker-toggle>
                <mat-datepicker #dateOfBirth></mat-datepicker>
            </mat-form-field>

            <mat-checkbox formControlName="isDependent">Is Dependent</mat-checkbox>

            <div fxFlex="100%"></div>
            <mat-card-actions>
                <button mat-raised-button color="primary" type="submit" class="align-right-button">
                    Save
                </button>
            </mat-card-actions>
        </div>

I tried using the <mat-form-field> , but as per angular material docs. <mat-checkbox> cannot be a part of <mat-form-field>

Answer 1

You have to position the checkbox manually. There is no other way to line the elements. Something like align-self: center for mat-checkbox.

Please be aware that mat-form-field has some custom paddings/margins. So, to have the perfect fitment you will need to inspect the element and add a couple px at the top. Depending on font-size it differs.

Hopefully, it will help. Good luck!

Answer 2

This is how I deal with it:

<mat-checkbox class="checklist-leaf-node" style="width: 100%;" #checkBox formControlName="isDependent"> Is Dependent</mat-checkbox>
<mat-form-field style="width: 0%;">
   <input matInput class="pointer" type="text">
</mat-form-field>

Answer 3

found a workaround using css and separating the mat-checkbox text into its own label tag with position relative

<mat-checkbox style="position:relative;top:-20px;left:15px;">
    </mat-checkbox>
    <label style="position:relative;left:27px;top:-10px;">
      some long text
    </label>