We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How can I customize the float label?


This question actually applies to all controls where a floatLabel can be used. In my form, I have some inputs which are required and need some indication like a *.

Here is an example of a textBox I'm using:

<ejs-textbox placeholder="Vorname" floatLabelType="Auto" formControlName='vorname' (created)='disableAutocompleteVorname()'></ejs-textbox>

This is the css:

.required:after {
color: #d00;
content: "*";
position: absolute;
margin-left: 3px;
top: -3px;

The first asteriks is ok - this does work because I'm using this code:

<span class="custom-label required">Geschlecht</span>
<ejs-radiobutton cssClass="custom-margin" label="männlich" name="geschlecht" [value]='"M"'
<ejs-radiobutton cssClass="custom-margin" label="weiblich" name="geschlecht" [value]='"W"'

on the other controls without "custom-label" it looks like you can see on the picture. The asteriks is supposed to be right behind "Vorname"

1 Reply

CI Christopher Issac Sunder K Syncfusion Team December 4, 2018 01:16 PM

Hi Paul, 
Thank you for contacting Syncfusion support. 
As per your requirement, we have prepared a simple sample with enable the Asterix  in float label text. For more information, please refer the below stackblitz sample, 
In the above sample, based on the enableAsterix’s  boolean value, Asterix class added to root element using ngClass directive. For more information about floatLabelType property in TextBox component, please refer the below ug documentation, 

Please let us know if you require any further assistance. 

Live Chat Icon For mobile
Up arrow icon