CODEWITHSUNDEEP
angular-material
MadMac
MadMac

Reputation: 4871

Angular Material: mat-checkbox vertical alignment of checkbox

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:

enter image description here

Should be like:

enter image description here

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>

Upvotes: 13

Views: 30855

Answers (9)

remy
remy

Reputation: 102

My solution for "@angular/core": "^17.3.2"

::ng-deep {
  .mdc-form-field.mat-internal-form-field {
    align-items: flex-start;
  }

  .mdc-form-field>label {
    padding-top: 12px; /* maybe you have to adjust this for your needs */
  }
}

Setting the margin (as in the other answers here) did not work for my case. The mat-checkbox has this padding/ripple so it still would look like the box does not fit with the (first) line of the label.

The outer div has the properties display: inline-flex; align-items: center; for the checkbox itself an its label. So we simply change this behavior and add some custom padding.

Upvotes: 1

C Halsema
C Halsema

Reputation: 61

In "@angular/material": "16.2.12", you need to use mdc format.

.mat-checkbox-inner-container does not appear to be used anymore.

Use this instead

.mdc-checkbox  {
    margin: 0px 8px auto !important;
}

Upvotes: 0

Sanid Sa
Sanid Sa

Reputation: 294

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

Upvotes: 0

YAO ALEX DIDIER AKOUA
YAO ALEX DIDIER AKOUA

Reputation: 249

<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;
}

Upvotes: 0

Pytth
Pytth

Reputation: 4176

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;
  }

Upvotes: 1

1252748
1252748

Reputation: 15372

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

Upvotes: 3

Pat M
Pat M

Reputation: 6036

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;
   }
}

Upvotes: 11

Craig
Craig

Reputation: 990

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.

Upvotes: 4

AnasM
AnasM

Reputation: 1

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>

Upvotes: -1

Related Questions