Topic: Material Select See-Through When Open on Other Material Selects

athleticssoftware pro asked 5 years ago

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’;

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
<br />
<br />
<br />
Screen Shots Over Lapping Not Over Lapping (its the last one in the list or material selects from the example code above.

Łukasz Salamon pro commented 5 years ago

yes I've seen that. It is also happening when datepicker is overlapping with material select.

Dawid Adach pro answered 5 years ago

Hi, thanks for reporting this issue. It is known bug, which was recently fixed. Below, you can download scss file which was causing this issue. Just replace _material-select.scss with this one

athleticssoftware pro commented 5 years ago

Thanks for the fix! We will try it out Monday. - Christopher

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: Yes