ngx-bootstrap Modal中mat-select选项显示在模态框后方的问题求助

Hey there, I've run into this exact issue before—it's all about z-index stacking order! The problem is that ngx-bootstrap's modal has a higher default z-index than Angular Material's mat-select dropdown overlay, so the options end up hidden behind the modal.

First, let's clear up a useless line in your code: the style attribute on your <ng-template> doesn't do anything here. <ng-template> is just a template placeholder and doesn't render into the actual DOM, so those styles won't apply to the modal content at all.

Here's how to fix this properly:

Solution 1: Adjust the CDK Overlay Z-Index Globally #

Angular Material uses the cdk-overlay-container to render dropdowns and other floating elements. We just need to make sure its z-index is higher than ngx-bootstrap's modal (which defaults to 1040).

Add this to your global styles file (usually styles.scss or styles.css at the root of your project):

.cdk-overlay-container {
  z-index: 1050 !important;
}

If you want to avoid using !important (a good practice when possible), you can target it only when a modal is open:

.modal-open .cdk-overlay-container {
  z-index: 1050;
}

Solution 2: Target Specific Modals (Optional) #

If you only need this fix for one specific modal, you can add a custom class when opening the modal, then adjust the overlay z-index for that scenario.

When opening the modal in your component code:

this.modalService.show(this.editTemplate, {
  class: 'custom-select-modal'
});

Then add this to your global styles:

.custom-select-modal ~ .cdk-overlay-container {
  z-index: 1050;
}

Updated Template Code #

Remove the unnecessary style from your <ng-template> since it doesn't work:

<ng-template #editTemplate>
  <mat-form-field>
    <mat-select multiple placeholder="Multiple Cities" [(ngModel)]="currentCity" name="Paris" ariaLabel="cities[0]">
      <mat-option *ngFor="let city of cities" [value]="city.value">
        {{ city.viewValue }}
      </mat-option>
    </mat-select>
  </mat-form-field>
</ng-template>

After applying one of these solutions, your mat-select dropdown options should render on top of the ngx-bootstrap modal instead of behind it.

内容的提问来源于stack exchange，提问作者Hassan Amjad