Vertically Align mat-checkbox and mat-form-field | Angular Material | 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>

can you please reproduce this in a fiddle with your css?

manneJan89
– manneJan89

2020-06-24 09:54:53 +00:00
Commented Jun 24, 2020 at 9:54 — manneJan89
– manneJan89, Commented Jun 24, 2020 at 9:54

Ivan Vilch · Accepted Answer · 2020-06-24 10:28:26Z

2

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!

answered Jun 24, 2020 at 10:28

Ivan Vilch

1061 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Waleed Al-Yazidi · Accepted Answer · 2022-06-03 23:02:50Z

0

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>

answered Jun 3, 2022 at 23:02

Waleed Al-Yazidi

133 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

rajquest · Accepted Answer · 2022-08-16 14:20:30Z

0

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>

Some case below css in main stylesheet seem to work

.mat-checkbox.mat-accent .mat-checkbox-inner-container {

margin: 2px 8px auto 0; }

edited Aug 16, 2022 at 14:20

answered Aug 15, 2022 at 18:05

rajquest

7411 gold badge7 silver badges12 bronze badges

Collectives™ on Stack Overflow

Vertically Align mat-checkbox and mat-form-field | Angular Material | Angular

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related