Question

我对5号角还不熟悉，所以我需要制作一个具有全角输入的表单，并且我希望每个输入都占据其容器的整个宽度，但是，它只占一半。

我正在使用角形材料这是我的代码：

<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>

谢谢。

Answer 1

您将需要在所有mat-form-field上添加一个可以调用您想要的类的类，但是我将其称为full-width-field，所以最终它将看起来像这样。

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%;
}

示例摘自Angular Material Docs

Answer 2

您必须应用自定义样式才能使所有mat-form-field变为全角：

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

自动将其中的所有输入元素全角显示

Answer 3

尽管建议使用 width:100% 的答案会起作用，但它们也意味着您需要更仔细地考虑边距，因为根据您的盒子模型，您可能会发现您的宽度甚至比周围的还要大容器。

一个更惰性的变化就是将 mat-form-field 的样式从 inline-block（其默认值）更改为阻止

HTML：

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

CSS：

.full-width-field {
  display: block;
}

Angular 5材料设计全角输入

3 个答案: