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:
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.