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.
Unfortunately, activation email could not send to your email. Please try again.

Floating Label Functionality in ej Textboxes

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

C:\Users\ashokkumar.balasubra\Desktop\asdada\floating.JPG

Figure 2: Output

 

C:\Users\ashokkumar.balasubra\Desktop\asdada\floating1.JPG

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
Article ID: Published Date: Last Revised Date: Platform: Control:
7553 03/08/2017 05/31/2017 JavaScript ejPercentageTextbox
Tags:
Did you find this information helpful?
Add Comment
You must log in to leave a comment

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.