CODEWITHSUNDEEP
csscheckboxangular-material
miken
miken

Reputation: 387

Reposition checkbox check with long label when white-space: normal Angular Material

I have an Angular Material Checkbox with a long label. When I set white-space: normal for the checkbox, it confines the text to an outer div, however, it aligns the checkbox check center left with the text, and I would like to align the checkbox check to top left.

<mat-checkbox color="primary">
    This is a checkbox with a really long label, I want to wrap on new lines, but also want to align the checkbox check to top left, and it defaults to center left.
</mat-checkbox>

This fixes the issue with the text being on a single line, however, results in the checkbox check being aligned center left, and I want to move it to top left.

::ng-deep .mat-checkbox-layout {
   white-space: normal !important;
}

I would like to be able to re-position the checkbox check to top left, instead of the default center left.

Upvotes: 0

Views: 1946

Answers (1)

G. Tranter
G. Tranter

Reputation: 17918

The checkbox has automatic margins that need to be reset:

::ng-deep .mat-checkbox-inner-container {
  margin-top: 4px !important;
}

Upvotes: 2

Related Questions