CODEWITHSUNDEEP
cssangularangular-material
integral100x
integral100x

Reputation: 342

How do I change the width of mat-checkbox?

I'm having a hard time changing the width of mat-checkbox. It seems to stop at the end of the mat-checkbox label and doesn't extend further. I need it to extend to length of 630px. Is there a way to make it larger? I've tried numerous ways like width: 630px !important; width: 100% !important; max-width: 630px !important; max-width: 100%; width: auto !important but nothing seems to work.

<mat-checkbox
  (change)="setSelected(i)"
  [class.is-correct]="option.selected && option.correct"
  [class.is-incorrect]="option.selected && !option.correct">

  <mat-checkbox-label>
    <span>{{ i + 1 }}. {{ option.text }}</span>
  </mat-checkbox-label>
</mat-checkbox>

Upvotes: 1

Views: 6144

Answers (1)

Aleksey Melnikov
Aleksey Melnikov

Reputation: 101

Have you tried this?

 // Checkbox label width will be 630px
 ::ng-deep .mat-checkbox .mat-checkbox-label {
    width: 630px;
 }

or

// Checkbox component width will be 630px
::ng-deep .mat-checkbox  {
    display: inline-block;
    min-width: 630px;
}

Upvotes: 4

Related Questions