FloatLabel on sfNumericTextBox

Hi

On a normal text box using FloatLabelType="@FloatLabelType.Auto" will cause the place holder text to animate up into a label on focus...

It will look like this:

without focus:Screenshot 2022-03-20 142338.png

with focus:  Screenshot 2022-03-20 142442.png


How do i get the same animation effect on a sfNumericTextBox?

Using this code the placeholder text is replaced by the '$0.00' and the label at the top is always visible even before the control has focus.

<SfNumericTextBox TValue="decimal" Currency="USD" Decimals="2" Format="c2" id="tbxStrikePrice" Placeholder="Strike Price" FloatLabelType="@FloatLabelType.Auto" />

You no longer get the nice animated effect and it no longer matches the other inputs on the form as its label is already visible (where the other input's labels are not)

Screenshot 2022-03-20 143248.png

How can i get the animated label/placeholder effect to work on the  SfNumericTextBox?


1 Reply

PM Ponmani Murugaiyan Syncfusion Team March 22, 2022 03:35 PM UTC

Hi James, 

We suggest you to use the TValue as Decimal? to meet your animation effect in the Numeric Textbox UI.  


<SfNumericTextBox TValue="decimal?" Currency="USD" Decimals="2" Format="c2" id="tbxStrikePrice" Placeholder="Strike Price" FloatLabelType="@FloatLabelType.Auto" /> 

Regards, 
Ponmani M 


Loader.
Up arrow icon