#css #sass #angular6 #angular-material-6
#css #sass #angular6 #angular-материал-6
Вопрос:
Я хочу установить разную ширину для разных форм в mat-step.Содержимое в первой форме должно иметь ширину 400 пикселей, а содержимое второй формы — ширину 700 пикселей.
<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>
Но это не работает, может кто-нибудь, пожалуйста, помочь мне, как этого добиться.
Комментарии:
1. Я не уверен. Он должен принимать указанную ширину. Если вы говорите о том, что поле формы занимает не всю ширину, то вам нужно добавить
.mat-form-field { width: 100% }
в свой css.
Ответ №1:
Поскольку меняется только видимость mat-step components
, вы должны перезаписать ширину невидимых.
Используйте следующий код в CSS
файле:
::ng-deep .mat-horizontal-stepper-content[aria-expanded="false"] {
width: 0px !important;
}
После использования этого вы можете использовать разные размеры ширины для каждого шага.
Комментарии:
1. Элегантное решение самой раздражающей проблемы. Спасибо.