Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: [Bug Report] mdb-select component styling

Weiser pro asked 6 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 6 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

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