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

athleticssoftware pro asked 7 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’;

@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.

Łukasz Salamon pro commented 7 years ago

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

Dawid Adach pro answered 7 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

https://pastebin.com/1tdH824z


athleticssoftware pro commented 7 years ago

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


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

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