CODEWITHSUNDEEP
htmlcssangular
stack0030
stack0030

Reputation: 83

Angular mat-list-option text not getting wrapped

I have list of checkbox, when the text of the checkbox are too long it doesn't wraps around properly PFA image:

Checkbox image Please check the red box

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>

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 want the checkbox text to be wrapped without any space in between!!! For your reference please check the screenshot attached.

Upvotes: 0

Views: 997

Answers (2)

stack0030
stack0030

Reputation: 83

.checkbox-list .checkbox-list-option.mat-list-option {
  height: 48px;
}

this worked by removing line-height!!!

Upvotes: 1

Lalji Tadhani
Lalji Tadhani

Reputation: 14169

change line-height on :host ::ng-deep .mat-form-field-wrapper

:host ::ng-deep .mat-form-field-wrapper {
  height: 100%;
  line-height: 1.2;
  padding: 0;
}

Upvotes: 0

Related Questions