Hi Jassen,

This thread is related to an older Telerik UI for Blazor version that had different label configuration and rendering.

Currently (3.5.0), there are two possible scenarios and both work as intended:

• The label may be shorter than the textbox width, so it is completely visible.
• If the label is longer than the textbox, it will be clipped. A too long label raises the question how to handle it seamlessly out-of-the-box. In other words, how do we allocate space for a longer label, given that such space may not exist in the page layout?

Here is how to workaround the built-in behavior and make the label expand outside the textbox, if you wish:

<TelerikFloatingLabel Class="long-label" Text="The label is longer than the textbox width (workaround)">
    <TelerikTextBox @bind-Value="@TextBoxValue" Width="200px" />
</TelerikFloatingLabel>

<style>
    .long-label.k-floating-label-container.k-focus .k-label {
        overflow: visible;
    }
</style>

@code {
    string TextBoxValue { get; set; }
}

Regards,
Dimo
Progress Telerik

For Width="100%" for the textbox, the following can be a workaround:

<style>
    .k-floating-label-container {
        width: 100%;
    }
</style>

<div style="width: 400px; border: 1px solid red;">
    <TelerikTextBox Label="the label" Width="100%" @bind-Value="@theValue"></TelerikTextBox>
</div>
@code{
    string theValue { get; set; } = "lorem ipsum dolor sit amet";
}

Regards,
Marin Bratanov
Progress Telerik