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: Disabled options in mdb-select will not be grayed out, when using skin toggler class

hope55 premium asked 3 months ago


*_Expected behavior_*Disabled options in mdb-select dropdown should appear greyed out, (i.e.: option.disabled class applied), when custom theme class is used as described here (https://mdbootstrap.com/docs/angular/content-styles/theme/) at the skin toggler part.

*_Actual behavior_*Disabled options in mdb-select show up with normal text color, not greyed out, when using a skin toggler class.

*_Resources (screenshots, code snippets etc.)_*I applied a skin toggler in my page like this:

$my-theme-primary: #F1680E; // theme primary color, change this value to customize theme
$my-theme-secondary: #353A4F;

$my-light-theme: mdb-light-theme($my-theme-primary, $my-theme-secondary);
.conosorange-skin {
    @include mdb-theme($my-light-theme);
}

The problem is that the 'conosorange-skin.option' CSS class overrides the original (non skin related) 'option.disabled' class. This is because they have the same priority (both have a class name and a type selector), and the 'conosorange-skin.option' class appears later in the CSS file. As a result, the disabled option's text color is not displayed correctly. To fix this, make sure that the CSS specificity doesn't cause conflicts, even when the skin toggler is active.

https://usercontent.mdbootstrap.com/mdb-images/support/9feffeaa-dfb4-44a8-a2be-8216191a8264-option-disabled-problem.jpg


Rafał Seifert free answered 3 months ago


Please, try adding such styling rule after your custom theme settings to overwrite the settings.

.option.disabled[role='option'] {
  color: red;
}

Let me know if that works for you.


hope55 premium commented 3 months ago

Thanks, Rafael! I can confirm that this workaround fixes the issue, I hope it will be addressed by the next release.



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: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 6.1.0
  • Device: PC
  • Browser: Chrome (latest)
  • OS: Win10
  • Provided sample code: No
  • Provided link: Yes