Topic: Disabled options in mdb-select will not be grayed out, when using skin toggler class
hope55 premium asked 1 month 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.
Rafał Seifert free answered 1 month 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 1 month ago
Thanks, Rafael! I can confirm that this workaround fixes the issue, I hope it will be addressed by the next release.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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