Question 214853 in CSS Question posted in
Some basic documentation can be found here.

Css – Angular validation message – override class

I am showing Angular error messages using the following code:

<mat-error>
   {{error}}
</mat-error>

Sometimes I need to change the left position of the error message. The class that responsible for showing errors is this: ".mat-mdc-form-field-error-wrapper".I can override it like this:

.mat-mdc-form-field-error-wrapper {
    left: -210px !important;
}

Which works. However, it changes error position everywhere. Any idea how to accomplish it?

Thanks

Tags:

2

Answers


  1. 0

    **You can try this **

    ::ngdeep .mat-mdc-form-field-error-wrapper {
left: -210px !important;

    }

    Login or Signup to reply.
  2. 0

    when you use some like

    <mat-error class="custom">
....
</mat-error>

    See that the class "custom" is applied to the "mat-error" tag, so you should change some class of this "tag" you can use simple

    .custom{
  margin-left:-210px;
}

    If you want more specificy, for example to change the color you can use

    .custom.mat-mdc-form-field-error {
  margin-left: -40px;
  color: green;
}

    NOTE: avoid use !important, really it’s a headache when in a future you will want change a .css if it’s full plenty of "importants"

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search