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?
<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%;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.