Hi,
I saw number of working examples where floatingLabel is working well. In my case also it is working very well.
If my textbox is empty and I'm trying to enter any data it is working fine without any issue. Following is my code
<
kendo-textbox-container
floatingLabel
=
"Warehouse"
>
<
kendo-textbox
type
=
"text"
formControlName
=
"warehouse"
placeholder
=
"Enter Warehouse"
name
=
"warehouse"
[showSuccessIcon]="'initial'" [showErrorIcon]="'initial'" required
maxlength
=
"100"
></
kendo-textbox
>
</
kendo-textbox-container
>
Same is not working when I use the same code for edit mode means I fetched the data from API and tries to edit the record at that time my data is present is the form but in that case my textbox value overlapping with floatingLabel.
I attached the screenshot of it for the reference.
Once again I want to say, I tried all the available and suggested option like placehoder="''", binding with kendo-lable, binding with [for] and so many others.
5 Answers, 1 is accepted
Hi Srinivas,
To achieve the mentioned behavior the FloatingLabel component should be used to wrap the TextBox component.
<kendo-floatinglabel text="Enter First Name">
<kendo-textbox
formControlName="name"
[showSuccessIcon]="'initial'"
[showErrorIcon]="'initial'"
></kendo-textbox>
</kendo-floatinglabel>
Here is an example, demonstrating this approach:
https://stackblitz.com/edit/angular-rv7vse-sjkeui?file=app/app.component.ts
I hope this helps. Let me know should there be further questions.
Regards,
Preslava
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Hi Preslava,
I did the same as you mentioned in your sample.
<kendo-floatinglabel text="Enter First Name">
<kendo-textbox
formControlName="warehouse"
[showSuccessIcon]="'initial'"
[showErrorIcon]="'initial'"
required
maxlength="100"
placeholder="Enter Warehouse">
</kendo-textbox>
</kendo-floatinglabel>
Find the attached screenshot of my code and output.
Please let me know if you find any solution.
Regards,
Srinivas M. P.
Hi Srinivas,
Thank you for the screenshot.
The FloatingLabel component relies on handling focus and value change events. If the value is changed programmatically, neither would be triggered.
More information on this topic could be found here:
https://www.telerik.com/kendo-angular-ui/components/labels/floatinglabel/#toc-focusing-the-component
The desired behavior could be achieved by utilizing the formControl binding for adding the value:
constructor(private formBuilder: FormBuilder) {
this.form = this.formBuilder.group({
name: new FormControl("John", [
Validators.required,
Validators.minLength(3)
]),
surname: new FormControl("", [
Validators.required,
Validators.minLength(3)
])
});
}
https://stackblitz.com/edit/angular-rv7vse-sjkeui?file=app/app.component.ts
If the problem persists, please, modify the Stackblitz example with your code, so I can inspect further.
I hope this helps. Let me know how this goes.
Regards,
Preslava
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Hi Preslava,
Please check the update stackblitz
Regards,
Srinivas
Hi Srinivas,
Thank you for the time spent on updating the demo. But in order for us to see the modified Stackbliz example, it should be forked through the "Fork" button.
Thus, a unique URL will be generated. Please, send us this link, so we can inspect the issue.
Thank you.
Regards,
Preslava
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.