Topic: How to change color of label, border & box-shadow when Validation is valid

lukas.koch free asked 4 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:

Left is the mdb-select with the default color and to the right is a normal inputfield with the color I also want for the mdb-select

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 4 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.



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: 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