Style parts of a floating label differently

Progress® Kendo UI® for Angular Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Approved

Last Updated: 01 May 2019 07:16 by ADMIN

Carlos

Created on: 29 Apr 2019 20:08

Category: TextBox

Type: Feature Request

Style parts of a floating label differently

Hello, How can I have floating label with some style applied like this:

<label>Name <span class="k-required">*</span></label>

In this example, https://stackblitz.com/edit/angular-q2kehs?file=app/app.component.ts, how can I transform the label to use floating label?

Thanks

3 comments

ADMIN

Svetlin

Posted on: 01 May 2019 07:16

Hi Carlos,

Thank you for the provided additional details.

Unfortunately, at the moment there does not seem to be a built in feature that allows to achieve the desired behavior. Thus, I converted this ticket to be a public feature request item, so that it can be voted for:
https://feedback.telerik.com/kendo-angular-ui/1407009-style-parts-of-a-floating-label-differently

This will help us to evaluate the demand for the feature request and eventually provide it in a future release of Kendo UI for Angular.

Regards,
Svetlin
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Carlos

Posted on: 30 Apr 2019 13:00

Hello Svetlin, It seems my requirement was not clear enought. I do not want to format the label conditionally, I just want to have the same floating label in red(*) and other part of the floating label in black. I attach an image of what I need.

Thanks for your help

Attached Files:

floating-label.png

ADMIN

Svetlin

Posted on: 30 Apr 2019 12:36

Hi Carlos,

In terms of Kendo UI for Angular, we can add floating labels to inputs as demonstrated in the following article:
https://www.telerik.com/kendo-angular-ui/components/inputs/api/TextBoxContainerComponent/

Further check the following example demonstrating how we can bind the desired input to a formControl and apply conditionally the custom .red CSS class to its floating label:
https://stackblitz.com/edit/angular-q2kehs-jbxtdt?file=app%2Fapp.component.ts

I hope this helps. Let me know in case there is something unclear or further assistance is required for this case.

Regards,
Svetlin
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.