How to shrink the ValidationMessage string in Blazor

Question

I am new to blazor and currently working on a small project where I have a lot of text input fields on a page, which would be validated on submit. The page is responsive and would shrink into a column format when reducing device screen size. The message for a couple of validations is too long, and the string overflows out of its parent div element. What is a good way to fix that, and make the string break into multi-line? Code Code

Answer 1

The default ValidationMessage component generates a div and assigns the css class 'validation-message' at rendering time. If you want to change the look and feel, you can do one of these :

• create a custom ValidationMessage c# class, and use your own css class (refer this SO answer) or use bootstrap css etc
• quick and not so elegant fix, you can modify the validation-message class in your app.css or site.css file(s), so that it word wraps the lengthy error messages
• create a custom validator blazor component (as in this)