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
UI for Blazor
Jan Heiko Houtrouw
Posted on:21 Oct 2019 14:22
Hello,
"it may get removed from the component itself,"
I think if you remove the floating label it would be big degradation ...
ADMIN
Marin Bratanov
Posted on:21 Oct 2019 14:04
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><divstyle="width: 500px; border: 1px solid red;"><labelclass="myLabel">
my label text
<TelerikTextBoxWidth="100%" /></label><br /><TelerikTextBoxWidth="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.
When the Label is set, the width of 100% is not applied?
ADMIN
Marin Bratanov
Posted on:21 Oct 2019 10:54
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.