Floating label on a textarea

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

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/

 

 

 

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

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

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.  

 

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

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

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.

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:


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

Hi Dimiter,

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

Best regards!

Hi Dimiter,

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

Thanks,
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;
}