问题
I want to set different width for different form in mat-step.The content in first form to be as width of 400px and the second form content to be as width of 700px.
<mat-horizontal-stepper labelPosition="bottom" #stepper>
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Fill out your name</ng-template>
<div style="width:400px">
<mat-form-field>
<input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
</mat-form-field>
</div>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Fill out your address</ng-template>
<div style="width:700px">
<mat-form-field>
<input matInput placeholder="Address" formControlName="secondCtrl" required>
</mat-form-field>
</div>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
You are now done.
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="stepper.reset()">Reset</button>
</div>
</mat-step>
</mat-horizontal-stepper>
But it is not working , Can anyone please help me how to achieve this.
回答1:
Since only the visibility of the mat-step components
are changing you should overwrite the width of the invisible ones.
Use the following code in the CSS
file:
::ng-deep .mat-horizontal-stepper-content[aria-expanded="false"] {
width: 0px !important;
}
After using this you can use different width sizes for every step.
来源:https://stackoverflow.com/questions/55400932/how-to-set-different-width-for-different-form-in-mat-horizontal-stepper