Approved
Last Updated: 01 May 2019 07:16 by ADMIN
Carlos
Created on: 29 Apr 2019 20:08
Category: TextBox
Type: Feature Request
1
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:
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.