Floating label on a textarea

[Jacky]

Is it possible to have floating labels work on a textarea?  I have a form with Name, Date, and Description fields.  Floating labels work fine on Name and Date inputs but it doesn't seem to work correctly on Description because it is a textarea for multi-line input.  

 

 

[Svet]

Hi Jacky,

We can use the kendoTextArea directive in order to add a floating label to a textarea element. Check the following sample plunker demonstrating its use:

https://plnkr.co/edit/bbz2gUdc9scwqbot6UNu?p=preview

I hope this helps.

Regards,
Svetlin
Progress Telerik

[Jacky]

Hi Svetlin, I am using Material theme right now and it doesn't look right.  I forked your plunker and changed the theme css file to Material:

https://plnkr.co/edit/IfVqwEAuEnydgHiUaMDF?p=preview

 

Based on the Material changelog, floating label should be working since it was added in March: https://www.telerik.com/kendo-angular-ui/components/styling/theme-material/changelog/

 

 

 

[Jacky]

I notice floating label also does not work for dropdowns if dropdown does not have a default value set.  This is in both Default and Material theme.  In the plunker below, when you select a value, the floating label does not move up.  

https://plnkr.co/edit/ELcDTcYE7lHBdZ4Ghpyn?p=preview

[Svet]

Hi Jacky,

Thank you for checking the changelog of the Material theme.

Indeed, the provided sample plunker demonstrates the proper design of the floating label for a textarea element:

https://plnkr.co/edit/IfVqwEAuEnydgHiUaMDF?p=preview

For further reference please check the following guide from the official Material design:

https://material.io/guidelines/components/text-fields.html#text-fields-field-types

About the second question, the kendo-textbox-container needs to contain an Input with the kendoTextBox directive, or a Form-bound input component so that its floating label is properly implemented. For reference please check the following article from our documentation:

https://www.telerik.com/kendo-angular-ui/components/inputs/textbox/#toc-implementing-floating-labels

and here is an example:

https://plnkr.co/edit/zuCb7hom0kdnvM74TqRX?p=preview

I hope this helps.

Regards,
Svetlin
Progress Telerik

[Jacky]

Hi Svetlin,

Thanks for the link to the Material design doc.  Is there an equivalent to the multiline textfield as specified in the design doc where it looks like a normal textfield but dynamically changes height as the content increases? 

The Material Angular textarea component (https://material.angular.io/components/input/overview) behaves the same as the multi-line textfield in the design doc.  Same for React Material component (https://material-ui-next.com/demos/text-fields/).  That's what I expected the Kendo textarea would do too.  

 

[Alex Gyoshev]

Hello Jacky,

I am afraid that at this time there isn't an alternative to that type of text field in Kendo UI. I have logged your request in this Github issue, along with a workaround that can be used to achieve this behavior. You can subscribe to the issue to get a notification when the functionality is added to the inputs package.

Regards,
Alex Gyoshev
Progress Telerik

[Jacky]

Thanks Alex!  I subscribed to the Github issue and your workaround gets us very close to the behavior.

[BigzampanoXXl]

Hello,

I also have problems using the floating label on TextAreas, but only when I use Material design. The inserted text overlaps the floating label as soon as you enter more rows and the scrollbar gets visible. I think thats because as soon as you enter text the label is inside the TextArea and not above (like it is in Default- or Bootstrap-Design)

You can reproduce this problem even in your demo:

https://www.telerik.com/kendo-angular-ui/components/inputs/textarea/#toc-implementing-floating-labels

(Choose the Material design and enter more text than the textareas height)

 

Will this bug be fixed at any time? Or is there any workaround?

 

Thank you and best regards.

[Dimiter Topalov]

Hi Dietmar,

The described behavior was by design, and following the Material Design guidelines for floating labels over textareas. However, it indeed would be better to avoid overlapping the text label and the textarea content, thus I logged an issue to our GitHub repository, and we will do our best to address this on our end. You can track it here:

https://github.com/telerik/kendo-angular/issues/2082

Meanwhile, I can suggest overwriting the built-in CSS to either display the label above the textarea:

encapsulation: ViewEncapsulation.None,
    styles: [`
      .k-textbox-container.k-textarea-wrapper .k-label {
        top: 0;
      }
    `]

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

... or provide a solid background to the label element:

https://stackblitz.com/edit/angular-drfsja-npjzap?file=app/app.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[BigzampanoXXl]

Hi Dimiter,

We used your CSS fix to show the label above the textarea. That was exactly what we needed. Thank you!

Best regards!

[Chau]

Hi Dimiter,

What is the property I can set to override the position of kendoFLoatinglabel to display text below the input field?

Thanks,
Chau

[Chau]

Nvm, I found the solution by overwriting the css class k-floating-label-container as below:

.k-floating-label-container.k-state-empty>.k-label {
  padding-top: 0px;
}
.k-floating-label-container.k-state-focused>.k-label {
  padding-top: 48px;
}

.k-floating-label-container>.k-label {
  padding-top: 48px;
}