I have an EditForm as follows:

<EditForm  Context="formContext" Model="@_inputModel" OnValidSubmit="() => OnSubmitInput()">
    <DataAnnotationsValidator />
    <!-- other stuff ordered in bootstrap cols and rows --> 
    

    <div >
        <ValidationMessage For="() => _inputModel.NumberOfInputChannels"/>
        <label for="stNumberOfChannels" >Number of Channels</label>
        <input type="number"  id="stNumberOfChannels" 
            @bind="_inputModel.NumberOfInputChannels">
    </div>

</EditForm>

The property of the model corresponding to the form looks like this:

[Range(1, 4, ErrorMessage = "Number of Channels must be between 1 and 4!")]
[JsonPropertyName("n-channels")]
public ushort NumberOfInputChannels { get; set; } = 3;

My problem is simply, that the message appears too big, thus I want to make it smaller:

I have already tried to add to the <ValidationMessage /> tag, but it doesn't seem to have any effect at all.

CodePudding user response：

Either:

1. Modify validation-message in your CSS
2. Wrap ValidationMessage in a div and set whatever CSS you want on the div .

<div >
    <ValidationMessage For="() => myData.Name" />
</div>

For reference, the ValidationMessage source BuildRenderTree looks looks this:

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        foreach (var message in CurrentEditContext.GetValidationMessages(_fieldIdentifier))
        {
            builder.OpenElement(0, "div");
            builder.AddAttribute(1, "class", "validation-message");
            builder.AddMultipleAttributes(2, AdditionalAttributes);
            builder.AddContent(3, message);
            builder.CloseElement();
        }
    }

CodePudding user response：

<ValidationMessage> has a parameter AdditionalAttributes which captures attributes. However it sets the class attribute itself to validation-message which can be found in wwwroot/css

 <ValidationMessage For="() => _inputModel.NumberOfInputChannels"
                    style="font-size: 1rem;"/>

fs-6 is 1rem

Source code