在同一组件中使用多个 mat select .cdk-overlay-pane 位置与其他 mat select 冲突

Question

如图所示

在同一组件中使用多个 mat select .cdk-overlay-pane 位置与其他 mat select 冲突

component.cs file


@media only screen and (max-width: 800px) 

{::ng-deep .cardSelect .cdk-overlay-pane {top: 600px!important;}

::ng-deep #cdk-overlay-3 {bottom: 135px!important;}

::ng-deep .matRole .cdk-overlay-pane{bottom: 100px!important;}

   }

component.html

                        <mat-select formControlName="SavedcardNumber" panelClass="cardSelect"
                          disableOptionCentering>
                            <mat-option *ngFor="let card of Cards" [value]="card"

                                {{card.cardNumber.substring(0,4)}}********{{card.cardNumber.slice(-4)}}


                          </mat-option>
                        </mat-select>
                        <mat-icon matPrefix class="green-icon">credit_card</mat-icon>
                        <!-- <mat-error *ngIf="Password?.errors?.['minLength']">
                        Password is Weak.
                      </mat-error> -->
                      </mat-form-field>
                    </div>