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"

3 Replies

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

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. 

HM Hamisi Malipula June 25, 2022 09:54 AM UTC

I have a problem close to this but I cannot solve. My situation is that the float label is way misplaced with much larger margin. An example is shown below:

How can I reduce the margin of the label to look like normal textbox?


UD UdhayaKumar Duraisamy Syncfusion Team June 27, 2022 05:48 PM UTC

Hi Hamisi,

We have validated the reported query on our end. Unfortunately, we couldn’t reproduce the reported issue as per your scenario. We also attached a sample for reference. Also, we request you to provide additional details about the issue i.e., issue replication sample (or modify the attached sample), etc... This will help us validate the issue further and provide you with a better solution.

Sample : https://stackblitz.com/edit/angular-q6evv3?file=app.component.html


Udhaya Kumar D

Live Chat Icon For mobile
Up arrow icon