Category / Section
Floating Label Functionality in JavaScript Percentage Textbox.
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
Figure 2: Output
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
