时间戳

首页 > 解决方案 > 如何在 Angular Material 中增加垫选择表单的宽度？

html - 如何在 Angular Material 中增加垫选择表单的宽度？

问题描述

我正在尝试根据可用空间动态增加垫选择表单的宽度，同时将表单的标题保持在左侧。我下面的解决方案增加了表单的宽度，但将标题放在表单上方而不是左侧。

下拉样式：

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

html:

<span style="font-size: large; "> Subject Area </span>
<mat-form-field>
     <mat-label>Select a Subject Area</mat-label>
     <mat-select>
         <mat-option *ngFor="let subjectArea of subjectAreas" [value]="subjectArea.value">
             {{subjectArea.viewValue}}
         </mat-option>
     </mat-select>
</mat-form-field>

编辑：标题现在在表单的左侧，但正在换行。网页上有足够的空间将所有标题放在一行中。这是因为材料网格列表在页面中心组织了三个单独的表格吗？ 新问题

标签： htmlcssangular

解决方案

看看这个闪电战：https ://stackblitz.com/edit/angular-mat-select-example-icf9op

这个想法很简单：将你的 mat-form-field 元素包装在一个容器中，并将容器的显示设置为 flex。

<div class="form-field-group">
 <span class="form-field-label">Your Country:</span>
   <mat-form-field>
      <mat-label>Country:</mat-label>
     <mat-select name="countryString" [(value)]="selectedCountry">
        <mat-option [value]="'GB'">Great Britain</mat-option>
        <mat-option [value]="'US'">United States</mat-option>
        <mat-option [value]="'CA'">Canada</mat-option>
      </mat-select>
    </mat-form-field>
  </div>

以及使它工作的 SCSS：

.form-field-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  .form-field-label {
    white-space: nowrap;
  }
  .form-field-label + mat-form-field {
   margin-left: 10px;
  }
  mat-form-field {
    width:100%;
  }
}

推荐阅读