This is a migrated thread and some comments may be shown as answers.

FloatingLable notworking

5 Answers 23 Views
TextBox
This is a migrated thread and some comments may be shown as answers.
Srinivas
Top achievements
Rank 2
Iron
Veteran
Iron
Srinivas asked on 22 Mar 2021, 05:18 PM

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

Sort by
0
Preslava
Telerik team
answered on 24 Mar 2021, 01:42 PM

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/.

0
Srinivas
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 24 Mar 2021, 04:49 PM

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.

0
Preslava
Telerik team
answered on 26 Mar 2021, 10:03 AM

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.

0
Srinivas
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 26 Mar 2021, 04:27 PM

Hi Preslava,

 

Please check the update stackblitz

Regards,

Srinivas

0
Preslava
Telerik team
answered on 30 Mar 2021, 08:21 AM

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.

Tags
TextBox
Asked by
Srinivas
Top achievements
Rank 2
Iron
Veteran
Iron
Answers by
Preslava
Telerik team
Srinivas
Top achievements
Rank 2
Iron
Veteran
Iron
Share this question
or