[Bug Report] mdb-select component styling


Topic: [Bug Report] mdb-select component styling

Weiser pro asked 7 years ago

Hi,

i've just found a bug on mdb-select component:

  1. the z-index is too high. If you trigger the dropdown and scroll down, the dropdown will overlap everything. I solved this by overwriting the z-index to 1.
  2. if you set the directive [multiple]="true" to mdb-select component, it wont align to the component without multipe directive. also the arrow-down seems a bit higher positioned
  3. "filterEnabled" is not working together with "multiple" directive
  4. if "filterEnabled" directive is set and you filter some values, it filters correctly, but the "no results found" tag is always visible

also i have a question regarding mdb-select with directive multiple="true": is it possible to call a viewchild method which unchecks all selected values? If so, how is the mdb-select component called?

Screenshot 1:

https://imgur.com/a/3uucq

Screenshot 2:

https://imgur.com/a/p2WIA

Screenshot 4:

https://imgur.com/a/vL2Hx

the mdb-select components are wrapped in a simple row with simple col-4 without any additional styles

 

#UPDATE

i was able to fix the styling: the toggle arrow with multiple="true" as directive aligns now correctly and also all three collumns displays correctly inline.

i used following css in global styles.scss:

mdb-select {
z-index: 1!important;
}
mdb-select>div>div.multiple {
padding-top: 5px!important;
padding-bottom: 5px!important;
}
mdb-select>div>div.multiple>div.placeholder {
padding-bottom: 5px!important;
}
mdb-select>div>div.multiple>div.option {
padding-bottom: 5px!important;
}
mdb-select>div>div.multiple>div.toggle {
width: 30px!important;
height: 32px!important;
top: 6px!important;
}
#UDATE 2
z-index-1 seems to break it if you shrink the width of view to force them to wrap.
Screenshot:
https://imgur.com/a/ibH48

Damian Gemza staff answered 7 years ago

Dear Weiser, Points 1,2,4 will be fixed in next release of MDB Angular. For now you can download it from our dev branch: https://git.mdbootstrap.com/mdb/angular/ng-pro/tree/dev Best Regards, Damian
Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No