How can I customize the float label?

[Paul Kocher]

Hi!

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"'

formControlName='geschlecht'></ejs-radiobutton>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<ejs-radiobutton cssClass="custom-margin" label="weiblich" name="geschlecht" [value]='"W"'

formControlName='geschlecht'></ejs-radiobutton>

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"

[Christopher Issac Sunder K]

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, 

Sample: https://stackblitz.com/edit/angular-x7gwvv?file=src%2Fapp%2Fapp.component.html 

  

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, 

TextBox documentation: https://ej2.syncfusion.com/documentation/api/textbox/#floatlabeltype  

Please let us know if you require any further assistance. 

 

Thanks, 

Christo 

[Hamisi Malipula]

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?

Hamisi

[UdhayaKumar Duraisamy]

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

Regards,

Udhaya Kumar D