Topic: How to change color of label, border & box-shadow when Validation is valid
lukas.koch asked 5 years ago
Expected behavior
By adding the code postet below to my styles.scss I expect the code to overwrite the color of a mdb-select label, border & box-shadow, if its validationstatus is valid.
Actual behavior
The actual behaviour is that somehow my styles.scss gets compiled after the styles which come from the "mdb styles class". And because the "mdb styles class" also has !important i it, it overwrites my code.
Resources (screenshots, code snippets etc.)
styles.scss:
$yodafontgreen: rgb(154, 168, 4);
mdb-select.validate-success.ng-valid.ng-touched label,
mdb-select.validate-success.ng-valid.ng-touched + label {
color: $yodafontgreen !important;
}
mdb-select.validate-success.ng-valid.ng-touched div.multiple,
mdb-select.validate-success.ng-valid.ng-touched div.single {
border-bottom: 1px solid $yodafontgreen !important;
box-shadow: 0 1px 0 0 $yodafontgreen !important;
}
source code of one of the over 200 mdb-select I use in my app
<div class="col-md-4 col-xs-12">
<div class="md-form mt-0">
<mdb-select mdbValidate [visibleOptions]="8" name="pdurationselect" [options]="PeriodDurationDefault"
formControlName="moduleperiodduration">
</mdb-select>
<label>{{ Y.L('Period Duration') }}</label>
</div>
</div>
screenshot of a mdb-select next to a standard inputfield, where the select has the default color and the inputfield has the color I want the mdb-select to have:
style of the inputfield validation:
input.form-control.validate-success.ng-valid.ng-dirty,
input.form-control.validate-success.ng-valid.ng-touched,
.form-submitted input.form-control.validate-success.ng-valid {
border-bottom: 1px solid $yodafontgreen !important;
box-shadow: 0 1px 0 0 $yodafontgreen !important;
}
input.form-control.validate-success.ng-valid.ng-dirty + label,
input.form-control.validate-success.ng-valid.ng-touched + label,
.form-submitted input.form-control.validate-success.ng-valid + label {
color: $yodafontgreen !important;
}
source code of the inputfield:
<div class="col-md-4 col-12">
<div class="md-form mt-0">
<input mdbInput mdbValidate type="number" name="inpperiod_overlap_factor"
formControlName="moduleperiodoverlapfactor"
id="inpperiod_overlap_factor" class="form-control">
<label for="inpperiod_overlap_factor" class="">{{ Y.L('Period Overlapping [%]')}}</label>
</div>
</div>
Using !important is bad, but I have no other choice since MDB uses !important for many of their styles including the mdb-select valid style, which is, as you can see in this case, pretty annoying.
Now my question: Is there a way to fix this / overwrite the MDB styling, or do I have to wait until MDB refactors its code so there are less !important in it?
Thanks in advance
Lukas
Arkadiusz Idzikowski staff answered 5 years ago
There is one way to add a temporary fix. You can add a custom class to the select component and include it in the css selector to increase specificity. For example:
<mdb-select class="my-select"></mdb-select>
mdb-select.my-select.validate-success.ng-valid.ng-touched label,
mdb-select.my-select.validate-success.ng-valid.ng-touched + label {
color: $yodafontgreen !important;
}
mdb-select.my-select.validate-success.ng-valid.ng-touched div.multiple,
mdb-select.my-select.validate-success.ng-valid.ng-touched div.single {
border-bottom: 1px solid $yodafontgreen !important;
box-shadow: 0 1px 0 0 $yodafontgreen !important;
}
Of course we will take a closer look at this problem and refactor the code to make the customization easier.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 9.3.0
- Device: Lenovo ThinkPad
- Browser: Chrome / Firefox
- OS: Windows 10 Pro
- Provided sample code: No
- Provided link: No