Angular Material: mat-checkbox vertical alignment of checkbox - angular-material

Question

I can't seem to override the defaults to vertically align the checkbox relative to the checkbox label. Searched for a while but nothing has worked. See example image:
Should be like:
Have tried the following:
.mat-checkbox-inner-container {
margin: none;
}
HTML:
<label><b>Home Type</b></label>
<mat-checkbox>Entire place<br><small class="text-muted">Have a place to yourself</small></mat-checkbox>
<mat-checkbox>Private room<br><small class="text-muted">Have your own room and share some common spaces</small></mat-checkbox>
<mat-checkbox>Shared room<br><small class="text-muted">Stay in a shared space, like a common room</small></mat-checkbox>

Answer 1

Similar to Craig's answer but as a descendant of .mat-checkbox.mat-accent to spare the need of using "!important"
.mat-checkbox.mat-accent .mat-checkbox-inner-container {
margin: 2px 8px auto 0;
}
or using sass/less
.mat-checkbox.mat-accent {
.mat-checkbox-inner-container {
margin: 2px 8px auto 0;
}
}

Answer 2

Just run into the same problem. I used the following to solve it (unfortunately needs the dreaded !important):
.mat-checkbox-inner-container {
margin: 2px 8px auto 0 !important;
}
I found I had to adjust the top margin (2px in this case) to get the layout beside the label to look correct.

Answer 3

I was able to achieve this (I'm using Angular/Material 7.x) by resetting the margins the checkbox container uses.
Note that I have had to apply an additional translateY to account for the box's border-width, and reset the wrap on the label so the text doesn't try to stay on one line.
your.component.scss
:host {
::ng-deep {
.mat-checkbox-inner-container {
margin-top: initial;
margin-bottom: initial;
transform: translateY(2px); // value of checkbox border-width
}
.mat-checkbox-label {
white-space: normal; // wrap label text
}
}
}
StackBlitz Fiddle

Answer 4

I know this is old, but below worked for me – I honestly didn't even know auto worked with vertical alignment, but I guess it does 🤷🏽‍♂️:
.mat-checkbox-inner-container {
margin-top: 0;
}

Answer 5

<div>
<h1>LABEL CHECKBOX</h1>
<mat-checkbox class="mat-checkbox-layout"><strong>FINE</strong>Lorem ipsum dolor sit amet consectetur adipisicingelit. Optio vitae molestiae nemo magni odio voluptate corporis veniam sapiente earum fugiat rem,maiores et placeat qui iure, nobis ipsam sintenim.</mat-checkbox>
<mat-checkbox class="mat-checkbox-layout"><strong>OK</strong>Lorem ipsum dolor sit amet consectetur adipisicing elit.Optio vitae molestiae nemo magni odio voluptate corporis veniam sapiente earum fugiat rem, maiores et placeat qui iure, nobis ipsam sintenim.</mat-checkbox>
</div>
And the CSS is this (I create css class identically with angular css class)
.mat-checkbox-layout {
text-align: justify;
}
::ng-deep .mat-checkbox-layout .mat-checkbox-layout {
white-space: normal !important;
}

Answer 6

:host {
::ng-deep {
.mat-checkbox-layout {
align-items: end!important;
}
.mat-checkbox-label {
white-space: normal; // wrap label text
}
}
}

Answer 7

There is a fast solution which is not related to ng-material
you can put your "mat-checkbox" into "li" element and align your "ul" by setting the number of columns like this:
<ul style="columns:2">
<li>
<mat-checkbox>Entire place<br><small class="text-muted">Have a place to yourself</small></mat-checkbox>
</li>
<li>
<mat-checkbox>Private room<br><small class="text-muted">Have your own room and share some common spaces</small></mat-checkbox>
</li>
<li>
<mat-checkbox>Shared room<br><small class="text-muted">Stay in a shared space, like a common room</small></mat-checkbox>
</li>
</ul>