Completed
Last Updated: 23 May 2025 08:30 by ADMIN
Release 9.0.0
Created by: Frank
Comments: 0
Category: MaskedTextBox
Type: Bug Report
1

When the MaskedTextBox is not focused and has no value, the Floating Label displays over the textbox as expected, however, the mask itself remains visible.

Here is a test example with a CSS workaround:

<TelerikFloatingLabel Text="Floating Label Over Mask">
    <TelerikMaskedTextBox @bind-Value="@MaskedValue"
                          Mask="000-000"
                          Width="200px"
                          Class="mask-with-label" />
</TelerikFloatingLabel>

@if (string.IsNullOrEmpty(MaskedValue))
{
    <style>
        .mask-with-label input:not(:focus) {
            color: transparent;
        }
    </style>
}

@code {
    private string MaskedValue { get; set; } = string.Empty;
}

Completed
Last Updated: 05 Jan 2021 12:02 by ADMIN
Release 2.21.0

When the Label parameter of the TelerikMaskedTextBox is not defined, the Width is applied to the input of the component. However, it should be applied to the span holding the component.

====================================

ADMIN EDIT

A couple of workarounds:

  • You can define the Label parameter of the TelerikMaskedTextBox. In this case, you will not be facing the mentioned bug and also will not have to separately define a label tag
  • You can set the Bootstrap class "form-control" to the TelerikMaskedTextBox through its Class parameter and remove the Width parameter.

=====================================