Matblazor: Enhancement: Validation styles for outlined fields

Created on 22 Jun 2020  路  5Comments  路  Source: SamProf/MatBlazor

Hi!

The current validation looks like this:

Ke虂pernyo虌foto虂 2020-06-22 - 11 46 00

Setting the border color instead would look much better:

Ke虂pernyo虌foto虂 2020-06-22 - 11 48 45

I hope this will be included in a future release. Thanks.

All 5 comments

The following styles solve the problem:

.mdc-text-field__input.invalid {
    border-bottom: none !important;
}

.invalid + .mdc-notched-outline > .mdc-notched-outline__leading, .invalid + .mdc-notched-outline > .mdc-notched-outline__notch, .invalid + .mdc-notched-outline > .mdc-notched-outline__trailing {
    border-color: red !important;
}

@kristof12345 thanks for finding a solution. Do you want to submit a PR on develop for this fix?

@enkodellc Ok. I tried to create a new branch, but I鈥檓 not allowed to push it. (This would be my first contribution to a public repo, so I might be doing something wrong. )

Another question: what do you use to compress the css to a single line?

@kristof12345 you do not have rights to create a new branch or push. You will need to Fork the repo on your account. Then submit a PR using your Fork, don't forget to change the branch to develop.

Once you submit a PR I can revew and merge it into Develop. I don't have rights to merge to master.

This will help: https://opensource.com/article/19/7/create-pull-request-github

I know it is not super straight forward but it is a skill you will use in the future as you contribute more and it is an asset in your developer arsenal :)

Fix is in Develop Branch.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

sam-marteau picture sam-marteau  路  5Comments

rogeralsing picture rogeralsing  路  5Comments

Mercurial picture Mercurial  路  5Comments

esso23 picture esso23  路  5Comments

daviderusso1984 picture daviderusso1984  路  6Comments