Below is the code for a Blazor component that includes a textbox which can be edited with the click of a button.
@if (_editing)
{
<div class="floatingbox position-relative">
<input type="text" value="@AddText" @oninput="@(e => { AddText = e.Value.ToString(); })"
@onblur="@(e => { InputBlured(e); })" @onkeyup="@(e => KeyPressed(e))" maxlength="75" />
<button type="button" class="button_search_term">
<div @onclick="ProcessInput"><i class="fas fa-arrow-right"></i></div>
</button>
</div>
}
else
{
<div class="floatingbox position-relative" @ondblclick="ToggleMode">
<span>@AddText</span>
</div>
}
I would like to have this span displayed directly under the input box for error messages:
<span hidden="@IsShow" class="error-color">Error message</span>
Despite using CSS with display block, the issue arises where the span becomes enabled and rearranges the input box controls when an error occurs. This problem can occur multiple times on a single page.
.error-color{
color:red;
//display:block;
padding-left:35px;
}
How can I style this so that the span remains positioned directly beneath the input box?