Porównaj ceny domen i usług IT, sprzedawców z całego świata

Wejścia o pełnej szerokości do projektowania materiałów kątowych 5


Jestem nowy w Angular 5, więc muszę utworzyć formularz z danymi wejściowymi o pełnej szerokości i chcę, aby każde wejście zajmowało pełną szerokość jego kontenera, jednak zajmuje tylko połowę.
Tutaj

co dostaję
https://i.stack.imgur.com/5qCDO.png
Używam materiału kanciastego
a oto mój kod:
<mat-grid-tile class="add-product-content" [rowspan]="4">
<form [formGroup]="addProductGroup" class="form-add-product" (ngSubmit)="sendDataProduct()">
<mat-accordion >
<mat-expansion-panel [expanded]="step === 0" (opened)="setStep(0)" >
<mat-expansion-panel-header>
<mat-panel-title>Personal data</mat-panel-title>
</mat-expansion-panel-header>
<div class="input-container">
<div class="flex-item">
<mat-form-field>
<input matInput placeholder="First name">
</mat-form-field>

<div class="flex-item">
<mat-form-field>
<input matInput type="number" min="1" placeholder="Age">
</mat-form-field>


<mat-action-row>
<button mat-button color="primary" (click)="nextStep()">Next</button>
</mat-action-row>
</mat-expansion-panel> <mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" >
<mat-expansion-panel-header>
<mat-panel-title>Personal data</mat-panel-title>
</mat-expansion-panel-header> <mat-form-field>
<input matInput placeholder="First name">
</mat-form-field>
<mat-form-field>
<input matInput type="number" min="1" placeholder="Age">
</mat-form-field>
<mat-action-row>
<button mat-button color="warn" (click)="prevStep()">Previous</button>
<button mat-button color="primary" (click)="nextStep()">Next</button>
</mat-action-row>
</mat-expansion-panel>
</mat-accordion>
<button mat-raised-button type="submit" class="actionButton">add</button>
</form>
</mat-grid-tile>

Podziękować.
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Na całym swoim
mat-form-field
będziesz musiał dodać klasę, którą możesz nazwać, jak chcesz, ale nazwę to
full-width-field
, więc w koniec będzie wyglądał tak.

HTML

:
<mat-form-field class="full-width-field">
<input matInput type="number" min="1" placeholder="Age">
</mat-form-field>


CSS

:
.full-width-field {
width: 100%;
}

Przykład zaczerpnięty z

Angular Material Docs
https://material.angular.io/co ... rview
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Musisz zastosować swój własny styl, aby wszystkie pola mat-formularzy miały pełną szerokość:
mat-form-field{
width: 100%;
}

Automatycznie

wszystko

elementy wejściowe materiału wewnątrz będą miały pełną szerokość

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się