如何避免2个下拉菜单之间重叠？

Question

我有以下代码，其中有两个复选框彼此相邻。 如果单击复选框，则会出现下拉菜单。

问题是单击菜单时，上面的下拉选项与下拉列表下方重叠。我该如何解决这个问题？我可以按顺序进行哪些更改，以使 UI 看起来良好且对齐并且没有重叠？

下面是代码

            <div class="flex items-center w-full">
                        <div id="data" fxLayout="row">
                            <mat-checkbox formControlName="allowData"
                                >Allowmat-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>

Answer 1

如果您希望选项显示在选择上方，这个 css 将为您做到！

.show-up.mat-select-panel {
  transform: translateY(
    -106%
  ); /* please adjust this based on your requirement! */
}

堆栈闪电战