Errortext is hidden when it's longer than textbox field

I am looking for a way to display the Errortext of an SfTextInputLayout when it is longer than the width of the field, without stretching the width. See Picture below where it hides it. 

Code below can help reproduce it

<syncfusion:SfTextInputLayout

    Grid.Row="1"

    Hint="Name"

    ErrorForeground="Red"

    ErrorText="Should not contain special characters"

    HasError="True"

    Width ="110">

    <TextBox Text="John/" />

</syncfusion:SfTextInputLayout>

 Image_6959_1733771741846


1 Reply

VO Vishal Omprasad Syncfusion Team December 10, 2024 12:15 PM UTC

Hi Steve,

Regarding “Error text is hidden when its text is longer than textbox field”:

As per the current implementation, in the WPF SfTextInputLayout control, when the ErrorText exceeds the textbox field's width, the overflow text is cropped. This is the expected behavior.

To overcome this scenario, we recommend creating a custom SfTextInputLayout class, override the OnApplytemplate() method and enable text wrapping for the ErrorText Label, as shown in the following code snippet.

[C#]:

public class CustomTextInputLayout : SfTextInputLayout

{

    public override void OnApplyTemplate()

    {

        base.OnApplyTemplate();

        Type myTypeB = typeof(SfTextInputLayout);

        FieldInfo myFieldInfo1 = myTypeB.GetField("errorLabel", BindingFlags.NonPublic | BindingFlags.Instance);

        TextBlock previousErrorLabel = myFieldInfo1.GetValue(this) as TextBlock;

        previousErrorLabel.TextWrapping = TextWrapping.Wrap;

        myFieldInfo1.SetValue(this, previousErrorLabel);

    }

}

We have prepared an example sample demonstrating this above approach and attached it below for your reference.

Please check our sample and let us know whether your requirement is achieved.

If you have any further questions or require assistance with any other aspect, please don't hesitate to let us know. We are here to help.

Regards,
Vishal O.


Attachment: TextInputLayoutDemo_43af0ebe.zip

Loader.
Up arrow icon