Issue
I have a checkbox I want to have a label with a multiline. How can you break the label of this?
<mat-checkbox>a somewhat longer label!</mat-checkbox>
I tried with css
mat-checkbox span { white-space: pre-wrap; }
but that looks weird
Solution
There is an existing issue about this on github, but here is a workaround.
Update: From Angular 15 and on:
To style the checkbox for the current component, just add the following to the component.css file:
:host::ng-deep.mat-mdc-checkbox .mdc-checkbox {
margin-top: -0.5em !important;
}
:host::ng-deep.mat-mdc-checkbox .mdc-form-field {
align-items: start !important;
}
If you want to apply it to all checkboxes of the entire app. Add the following to styles.css:
.mat-mdc-checkbox .mdc-checkbox {
margin-top: -0.5em !important;
}
.mat-mdc-checkbox .mdc-form-field {
align-items: start !important;
}
Prior to Angular version 15:
To style the checkbox for the current component, just add the following to the component.css file:
:host::ng-deep.mat-checkbox-layout{
white-space: normal !important;
}
:host::ng-deep.mat-checkbox-inner-container{
margin-top: 4px;
}
If you want to apply it to all checkboxes of the entire app. Add the following to styles.css:
.mat-checkbox-layout{
white-space: normal !important;
}
.mat-checkbox-inner-container{
margin-top: 4px;
}
Answered By - meblum
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.