Angular material checkbox long text is going out of the box

Issue

I have a material design form in my application.

<div fxFlex="20%"  fxFlex.xs="100%" fxFlex.sm="33%">
    <mat-card class="mat-elevation-z4">
        <mat-card-header>
            <mat-card-title>Form</mat-card-title>
        </mat-card-header>
        <mat-card-content>
            <form action="">
                <mat-checkbox class="example-margin"  matInput name="customerInfo.isok">
                    <div class="text-wrap">
                        This is very long text tha bla bla bla bla bla bla blablabla blablablablablablablablablablablabla
                       </div>
                </mat-checkbox>
                <mat-form-field appearance="outline">
                    <mat-label>Info</mat-label>
                    <textarea  matInput name="customerInfo.info" [(ngModel)]="customerInfo.info"></textarea>
                </mat-form-field>
            </form>
        </mat-card-content>
    </mat-card>
</div>

But my checkbox text is very long. So itout of the box.

enter image description here

How can I wrap it?

Solution

.text-wrap {
  white-space: normal;
}

Answered By – Sadegh

Answer Checked By – Candace Johnson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.