html - 如何增加 Angular Material 中 mat-select 表单的宽度？

Question

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

下拉样式:

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>

编辑: 标题现在位于表单的左侧，但正在换行。网页上有足够的空间将所有标题排成一行。这是由于 Material 网格列表在页面中央组织了三个单独的表格吗？ New Issue

Answer 1

看看这个 Blitz :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%;
  }
}