Red border lines do not include icons

Radzen.Blazor Components
1

image
image940×490 20.7 KB

<RadzenFormField Text="@L["New Password"]" Variant="Variant.Outlined" Style="width: 100%;">




<RadzenTextBox @bind-Value="@Input.Password" Visible="@(!_showPassword)"/>
<RadzenPassword @bind-Value="@Input.Password" Visible="@_showPassword"/>


<RadzenButton Icon="@(_showPassword ? "visibility" : "visibility_off")" Click="TogglePasswordVisibility" Variant="Variant.Text" Size="ButtonSize.Small"/>

When I use icons at the beginning and end of RadzenTextBox, the red border doesn't cover them. It looks weird. Is there a solution for this?

2

Hi @Yursat,

This behavior cannot be reproduced in the online FormField validation demos.

image
image2156×1658 165 KB

Perhaps some third party CSS is interfering with the input styles inside a FormField. Try removing the border with these styles:

<style>
    .rz-form-field-content .invalid {
       border: none;
    }
</style>