Required Validator Position Issue

Radzen.Blazor Components
1

After one of the Radzen updates, I didn't notice at first but my validators no longer appear underneath their element. Instead they seem to be occupying the same space, causing a weird appearance.

<RadzenTemplateForm TItem="Specimen" Data="@specimen" Submit="@Lookup">
        <div class="flex flex-col">
            <span for="Value" class="font-semibold">
                Accession Number
            </span>
            <div class="flex space-x-2">
                <div class="flex flex-col">
                    <RadzenTextBox MaxLength="50" Name="AccessionNumber" @bind-Value="specimen.AccessionNumber" class="w-96" />
                    <RadzenRequiredValidator Component="AccessionNumber" Text="Accession number required" />                    
                    <span class="@invalidCSS invalid-input">
                        Invalid accession number
                    </span>
                </div>
                @if (!isLoading)
                {
                    <RadzenButton ButtonType="ButtonType.Submit" Text="Lookup" Icon="search" class="font-semibold" />
                }
                else
                {
                    <RadzenButton ButtonType="ButtonType.Submit" Disabled="true" Text="Loading" Icon="search" class="font-semibold" />
                }
            </div>
        </div>
    </RadzenTemplateForm>

This code produced this search box:

image

Using the pop up setting, the element spawns from the same top left position of its parent element. If I put the validator into its own div then it will appear below the element, but it will overlap whatever is there. I am not sure why the validator div is not being treated as a physical element on the page that requires space.

2

There was a recent change that made validators have position absolute by default. We will discuss whether to revert that change. A quick fix is to apply position: static to your validators:

 <RadzenRequiredValidator style="position: static" Component="AccessionNumber" Text="Accession number required" />

Or to make it global

.rz-form .rz-messages-error {
    position: static !important;
}
3

Thank you for the reply, that did fix the issue. I am of the opinion that static should be the default here, as that is the behavior I and I'm sure others expect when using a website.

4

We investigated this further and it seems this change was unintended. We will revert it with the very next release of Radzen.Blazor.