web-dev-qa-db-ja.com

Angular 5マテリアルデザイン全幅入力

私はangular 5を初めて使用するので、全幅の入力を含むフォームを作成する必要があり、すべての入力がコンテナーの全幅を占めるようにしたいのですが、それはその半分。

これが 私が得ているもの

私はangularマテリアルを使用しており、コードは次のとおりです。

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

ありがとう。

javascriptangularangular-materialmaterial-designangular5
3
Adnane Lamghari

すべてのmat-form-fieldを全角にするには、カスタムスタイルを適用する必要があります。

mat-form-field{
    width: 100%;
}

自動的にallその中のマテリアル入力要素は全幅になります

1
Hari Das