如何解决Angular中两个Dropdown菜单的重叠问题？

我有如下代码，包含两个上下排列的Checkbox，点击Checkbox后会显示对应的下拉菜单。当前存在的问题是，点击菜单时上方的下拉选项会与下方的Dropdown重叠。请问该如何解决？需要做哪些修改才能让UI美观对齐且无重叠？

以下是代码：

<div class="flex items-center w-full">
    <div id="data" fxLayout="row">
        <mat-checkbox formControlName="allowData">Allow</mat-checkbox>
    </div>
    <div
        *ngIf="form2.value.extendedProperties.allowData"
        fxLayout="row"
        fxLayoutAlign="start center"
        class="full-width"
        fxLayoutGap="16px"
    >
        <mat-form-field fxFlex="30">
            <mat-select placeholder="Fee" formControlName="nom">
                <mat-option
                    *ngFor="let chargeType of nom.values"
                    [value]="chargeType"
                >{{ nom.descriptions[chargeType] }}</mat-option>
            </mat-select>
        </mat-form-field>

        <mat-form-field
            fxFlex="40"
            *ngIf="
                form2.value.extendedProperties.nom ==
                nom.Charge
            "
        >
            <mat-select placeholder="Select Nomination Fee" formControlName="ChargeId">
                <mat-option [value]="0">None</mat-option>
                <mat-option *ngFor="let fee of fees" [value]="fee.id">
                    {{ fee.name }}
                </mat-option>
            </mat-select>
        </mat-form-field>

        <mat-checkbox
            fxFlex="40"
            *ngIf="
                form2.value.extendedProperties.nom ==
                nom.classEntryFee
            "
            formControlName="ref"
        >
            Refund
        </mat-checkbox>
    </div>
</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px" class="full-width">
    <mat-checkbox
        formControlName="allowSessionData"
        (change)="allowModify($event)"
    >
        Allow
    </mat-checkbox>

    <mat-form-field *ngIf="form2.value.extendedProperties.allowSessionData" fxFlex="30">
        <mat-select
            placeholder="Nomination"
            formControlName="sessionNominationCategoryType"
        >
            <mat-option [value]="Amazon Category">AmazonData Category</mat-option>
            <mat-option [value]="Amazon Type">AmazonData Type</mat-option>
            <mat-option [value]="Amazon Variety">AmazonData Variety</mat-option>
        </mat-select>
    </mat-form-field>
</div>

解决方案 #

1. 修复下拉菜单重叠问题 #

Angular Material的mat-select默认将下拉菜单附加到body，容易和下方控件产生重叠，可通过两种方式处理：

• 自定义下拉菜单层级：给mat-select添加overlayPanelClass属性，在全局样式中提高其层级

  <mat-select placeholder="Fee" formControlName="nom" overlayPanelClass="top-select-overlay">
  

  在styles.scss中添加样式：

  .top-select-overlay {
      z-index: 1000 !important;
  }
  

• 指定下拉菜单依附父元素：使用[overlayOrigin]让下拉菜单在当前行容器内弹出，避免跨元素重叠
  先给父容器添加模板引用变量：

  <div #selectContainer fxLayout="row" fxLayoutAlign="start center" class="full-width" fxLayoutGap="16px">
      <mat-form-field fxFlex="30">
          <mat-select placeholder="Fee" formControlName="nom" [overlayOrigin]="selectContainer">
          </mat-select>
      </mat-form-field>
  </div>
  

2. 优化UI对齐效果 #

• 统一垂直对齐规则：将所有行容器的fxLayoutAlign改为center center，确保Checkbox和表单控件垂直居中对齐：

  <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="16px" class="full-width">
  

• 统一控件宽度与间距：给所有mat-form-field设置一致的fxFlex值，保持行容器的fxLayoutGap统一，避免布局错乱
• 修正代码语法错误：原代码中存在mat-checkbox未闭合、mat-option的value属性多余单引号的问题，需修正以保证正常渲染

3. 额外优化建议 #

• 使用form2.get('extendedProperties.allowData')?.value替代直接访问form2.value.extendedProperties.allowData，避免空指针异常
• 给动态显示的控件添加过渡动画：

  .full-width > * {
      transition: all 0.3s ease;
  }
  

内容的提问来源于stack exchange，提问作者OSAMA E