When the text of my checkboxes is too long, it doesn't wrap properly. Please see the image below for reference:
Click here to view Checkbox image and check the red box
Here is my HTML code:
<mat-selection-list #rolesSelection
class="checkbox-list"
[formControlName]="formControlName"
required>
<div class="builder-role" *ngFor="let role of roles; index as i">
<mat-list-option class="checkbox-list-option"
checkboxPosition="before"
(click)="onRoleSelect(role)"
(keyup.enter)="onRoleSelect(role)"
(keyup.space)="onRoleSelect(role)"
[value]="role">
{{role.getName()}}
</mat-list-option>
<mat-form-field *ngIf="shouldShowControl(role.getRoleId())"
class="builder-students">
<input appDigitOnly
i18n-aria-label
matInput
aria-label="Number of students"
max="{{maxNumberOfStudents}}"
min="1"
name="{{role.getRoleId()}}"
type="number"
value="{{getNumStudents(role)}}"
[formControlName]="role.getRoleId()"
[errorStateMatcher]="matcher"
(change)="setStudents($event.target.value, role)">
</mat-form-field>
</div>
</mat-selection-list>
And here is my CSS code:
.checkbox-list {
display: flex;
flex-wrap: wrap;
}
.builder-role {
display: flex;
width: 50%;
}
.builder-students {
max-width: 45px;
}
.role-error {
font-size: 10px;
text-align: right;
}
:host ::ng-deep .mat-form-field-infix {
border: 0;
text-align: center;
}
:host ::ng-deep .mat-form-field-wrapper {
height: 100%;
line-height: 160%;
padding: 0;
}
:host ::ng-deep .mat-form-field-underline {
bottom: 0;
}
:host ::ng-deep .mat-list-base .mat-list-item .mat-list-text,
:host ::ng-deep .mat-list-base .mat-list-option .mat-list-text {
flex-direction: initial;
}
I need the checkbox text to wrap without any spaces in between. Please refer to the attached screenshot for better understanding.