Material Select See-Through When Open on Other Material Sele

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
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
Write
Create snippet
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
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: Yes
About author
athleticssoftware
Pro User
37Support score
10Questions 0Answers
0Snippets likes 2Snippets