Hello Jan,

Even if we choose to remove this animated label, the textbox itself may lose an animation feature (labels will still be possible, of course), but it would also gain consistency with the rest of the components, so when you build a form with various input types, they will all look and behave in the same way - this also includes their line height and how labels are handled. You can read some other comments and discussion here. As the thread mentions, it is possible, that the animated label will become a separate component so that you could still use it, but the components will have better consistency out-of-the-box. At this point, I can't say what will happen.

Regards,
Marin Bratanov
Progress Telerik

Indeed, the floating label is the issue here. It requires a special CSS class that, most notably, puts position: relative on the wrapper of the textbox, so percentages no longer work.

Considering that only the textbox has such a label, I would recommend that you remove its Label parameter and use your own <label> elements to wrap it for accessibility, where you can add styling and content as desired.

<style>
    .myLabel {
        width: 100%;
    }
</style>
<div style="width: 500px; border: 1px solid red;">
    <label class="myLabel">
        my label text
        <TelerikTextBox Width="100%" />
    </label>
    <br />
    <TelerikTextBox Width="100%" />
</div>

At this point I cannot say what the future of the floating label feature will be, but it may get removed from the component itself, even if it gets exposed as a separate component.

I moved this thread to the public Feedback Portal so you can Follow its status. Here's a link for you: https://feedback.telerik.com/blazor/1435183.

Regards,
Marin Bratanov
Progress Telerik

Hi Jan,

We had a bug about this and we fixed it in 1.5.0 in August. What is the version that you are using? The 1.5.0 would no longer work with the current latest framework too, so you need to ensure you are using the latest one.

Also, can you confirm that CSS rules from the project are not taking precedence and defining the input widths?

I am attaching here a project with the current latest that uses the bootstrap theme and seems to define textbox width as expected for me. If comparing against it does not help you resolve this, please post the modification I need to make in order to observe the issue.

Regards,
Marin Bratanov
Progress Telerik