FloatingLable notworking

[Srinivas]

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.

 

 

 

 

[Preslava]

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

[Srinivas]

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.

[Preslava]

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

[Srinivas]

Hi Preslava,

 

Please check the update stackblitz

Regards,

Srinivas

[Preslava]

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