Kendo-angular: Floating label goes on top of input's value

[svetq]

The floating label goes on top of the input's value.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
      <kendo-textbox-container floatingLabel="Name">
        <input kendoTextBox [value]="value"/>
      </kendo-textbox-container>  
    `
})
export class AppComponent {
  public value = "John Doe"
}

Please check the following sample plunker demonstrating the issue:

http://plnkr.co/edit/cMpqCPBRBsXjpjwMbSBU?p=preview

[ggkrustev]

[Update]:
Currently, the kendo-textbox-container tries to add the floating label to any content child, automatically wiring its value and change event to the container. The component successfully does this for any TextBox, TextBoxArea or NgControl. The latter includes any input component bound to value either with [ngModel] or with [formControl].

Unfortunately, when the [(value)] property binding is used, the container doesn't have a feasible way to select its internal parts, because they are unknown. The possible solution is to expose a [for] binding, just like Kendo LabelDirective has, and expect the developer to pass a ref-id of the component. Thus the container will be able to wire its properties and enable the floating label.

The idea is still under consideration. We will update the thread once we have more details to share.

[danielkaradachki]

fixed in 3.2.2

https://stackblitz.com/edit/angular-74kpkc?file=app/app.component.ts

[srinivaspillalamarri]

This issue is not solved. Look at following code. Floating text overlapping input value if I use formControlName

        <kendo-textbox-container floatingLabel="Warehouse" for="warehouse">
          <kendo-textbox type="text" formControlName="warehouse" placeholder="Enter Warehouse" name="warehouse"
            [showSuccessIcon]="'initial'" [showErrorIcon]="'initial'" required maxlength="100"></kendo-textbox>
        </kendo-textbox-container>

If you want you can remove additional things like type, maxlength, placeholder and required.