为角材料步进器中的一步分配全宽

Question

For my project I am using Angular Material Stepper component as it is advised in docs

But when I run the stepper, the actual width of the text area (first step) is too small for my task (red rectangle). Is it possible to extend width of a step in the stepper to maximum size (green rectangle).

Markup for the first step text-area looks like that:

<mat-step [stepControl]="firstFormGroup">
  <form [formGroup]="firstFormGroup">
    <ng-template matStepLabel>Raw text</ng-template>
    <mat-form-field appearance="outline">
      <mat-label>Input raw text here</mat-label>
      <textarea
        matInput
        rows="15"
        placeholder="Raw text"
        required
        [(ngModel)]="sourceText"
      ></textarea>
    </mat-form-field>
    <div>
      <button mat-button matStepperNext>Next</button>
    </div>
  </form>
</mat-step>

I've tried using css code as it is advised here :

::ng-deep .mat-horizontal-stepper-content[aria-expanded="false"] {
  width: 0px !important;
}

But without effect.

Resume: Is there a way to extend text area in the red square (shown on the picture above) to the width of the green square?

Answer 1

 <mat-form-field appearance="outline" class='w100'>
      <mat-label>Input raw text here</mat-label>
      <textarea
        matInput
        rows="15"
        placeholder="Raw text"
        required
        [(ngModel)]="sourceText"
      ></textarea>
    </mat-form-field>

in CSS

.w100{
width : 100%;

}