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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Floating Label Functionality in ej Textboxes

Platform: JavaScript |
Control: ejCurrencyTextbox |
Published Date: March 8, 2017 |
Last Revised Date: May 9, 2019
Tags: javascript

How to achieve floating label functionality in EJ Textboxes Controls?

 

In EJ Textboxes components the floating label functionality can achievable in application level. We can form the below element structure and add the corresponding class (“e-float-container, e-float-text”) to achieve the floating label functionality to get the Material theme like floating appearance.

 

The following code demonstrates How to achieve floating labels functionalities in EJ Textboxes controls.

 

HTML:

<div class=" e-float-container">

 <input id="numeric" type="text" />

<label class=" e-float-text">Enter numeric value</label>

  </div>

 <div class=" e-float-container">

<input id="percent" type="text" />

<label class=" e-float-text">Enter percentage value</label>

</div>

<div class=" e-float-container">

<input id="currency" type="text" />

 <label class=" e-float-text">Enter currency value</label>

 </div>

 

JAVASCRIPT:

 

<script type="text/javascript">

$(function () {

            $("#numeric").ejNumericTextbox(

                                 {

                                     name: "numeric",

    width:"100%",

                                     watermarkText: "",

                                 });

 

            $("#percent").ejPercentageTextbox(

                                    {

                                        name: "percentage",

       width:"100%",

                                        watermarkText: "",

                                    });

 

            $("#currency").ejCurrencyTextbox(

                                    {

                                        name: "currency",

       width:"100%",

                                        watermarkText: "",

                                    });

        });

    </script>

 

The below screenshots displays the output of above code.

 

Figure 1: Output

NumericTextbox Floating

Figure 2: Output

 

NumericTextbox Floating1

A sample is available in the following location: Sample location

 

Note:

This support only applicable for after the Vol 2,2017(15.2.0.40) release

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon