css - 增加 mat-select 的大小但不改变 mat-form-field？

Question

我正在尝试在不更改 mat-form-field 大小的情况下增加 mat-select 选项的大小。它目前看起来像这样：

但是，当我尝试更改 mat-select 的大小时，它会将箭头推过并进入下一个字段：

代码：

<mat-form-field>
                    <mat-label>Account Name</mat-label>
                    <mat-select
                        id="account_list"
                        ngDefaultControl
                        formControlName="account"
                        class="menu-size"
                    >
                        <mat-option
                            *ngFor="let acc of accounts; let i = index"
                            [value]="acc.name"
                            id="account_option_{{ i }}"
                        >
                            {{ acc.name }}
                        </mat-option>
                    </mat-select>
                </mat-form-field>

CSS：

 .menu-size {
            width: 350px;
        }

有没有办法在不影响 mat 表单字段的情况下增加 mat 选项菜单的大小？

Answer 1

您可以使用CSS Flex Box完成您的目标。阅读一篇完整的文章可能会让人不知所措，所以我通常使用在线工具来帮助我，这样我就可以快速可视化我所追求的内容并获取所需的 css 样式。

amount使用下面的代码，在将输入调整为 100px后，我能够使选择菜单占用剩余的空白空间：

<div class="flex-container" style="display: flex;">

  <mat-form-field class="flex-fill-empty-space" style="flex: 1 1 auto">
    <mat-label>Account Name</mat-label>
    <mat-select>
      <mat-option *ngFor="let acc of [{ name: 'a' }, { name: 'b' }]">{{ acc.name }}</mat-option>
    </mat-select>
  </mat-form-field>

  <mat-form-field class="flex-stay-original-size" style="flex: 0 1 auto; width: 100px; margin-left: 1em;">
    <mat-label>Amount</mat-label>
    <input matInput>
  </mat-form-field>

</div>

示例输出：