We have a form where there are multiple material select components on the page. When there are 2 or more material selects stacked on top of each other if one of them is open the drop down is see-through to the other material selects (see the screen shots below). How can I make it so that when a material select is open it has a solid background? This only seems to happen with material selects. Code From The Components TS File

import { Component, OnInit } from ‘@angular/core’;

@Component({
selector: ‘color-material-select-example’,
templateUrl: ‘materialSelect.html’,
})

export class ColorMaterialSelectComponent implements OnInit {
colorSelect: Array<any>;
ngOnInit() {
this.colorSelect = [
{ value: ‘1’, label: ‘Option 1’ },
{ value: ‘2’, label: ‘Option 2’ },
{ value: ‘3’, label: ‘Option 3’ },
{ value: ‘4’, label: ‘Option 4’ },
{ value: ‘5’, label: ‘Option 5’ },
];
}
} 

  HTML Template

<mdb-ng-select [options]="colorSelect" placeholder="Choose your option" class="colorful-select dropdown-primary"></mdb-ng-select> <label>Blue select</label> 

Code in App

<color-material-select-example></color-material-select-example>
<br />
<color-material-select-example></color-material-select-example>
<br />
<color-material-select-example></color-material-select-example>
<br />
<color-material-select-example></color-material-select-example>
 

Screen Shots Over Lapping Not Over Lapping (its the last one in the list or material selects from the example code above.

---