Sizing

17 Feb 20227 minutes to read

You can render the TextBox in two different sizes.

Property Description
Normal By default, the TextBox is rendered with normal size.
Small You need to add e-small class to the input element, or else add to the input container.
<div class="control-section">
    <div class="control_wrapper accordion-control-section">
        <h4> Normal Size </h4>
        <div class="e-input-group">
            <input class="e-input" type="text" placeholder="Enter Name" />
        </div>

        <div class="e-float-input">
            <input type='text' required />
            <span class="e-float-line"></span>
            <label class="e-float-text">Enter Name</label>
        </div>

        <div class="e-input-group">
            <input class="e-input" type="text" placeholder="Enter Date" />
            <span class="e-input-group-icon e-input-popup-date"></span>
        </div>

        <h4> Small Size </h4>

        <div class="e-input-group e-small">
            <input class="e-input" type="text" placeholder="Enter Name" />
        </div>

        <div class="e-float-input e-small">
            <input type='text' required />
            <span class="e-float-line"></span>
            <label class="e-float-text">Enter Name</label>
        </div>

        <div class="e-input-group e-small">
            <input class="e-input" type="text" placeholder="Enter Date" />
            <span class="e-input-group-icon e-input-popup-date"></span>
        </div>
    </div>
</div>
<script>
    ej.base.enableRipple(true);

    // To get the all input fields and its container.

    var inputElement = document.querySelectorAll('.e-input-group .e-input,.e-float-input.e-input-group input');

    // Add 'e-input-focus' class to the input for achive ripple effect when focus on the input field.

    for (var i = 0; i < inputElement.length; i++) {
        inputElement[i].addEventListener("focus", function () {
            var parentElement = this.parentNode;
            if (parentElement.classList.contains('e-input-in-wrap')) {
                parentElement.parentNode.classList.add('e-input-focus');
            } else {
                this.parentNode.classList.add('e-input-focus');
            }
        });
        inputElement[i].addEventListener("blur", function () {
            var parentElement = this.parentNode;
            if (parentElement.classList.contains('e-input-in-wrap')) {
                parentElement.parentNode.classList.remove('e-input-focus');
            } else {
                this.parentNode.classList.remove('e-input-focus');
            }
        });
    }

    // Add 'e-input-btn-ripple' class to the icon element for achive ripple effect when click on the icon.

    var inputIcon = document.querySelectorAll('.e-input-group-icon');
    for (var i = 0; i < inputIcon.length; i++) {
        inputIcon[i].addEventListener('mousedown', function () {
            this.classList.add('e-input-btn-ripple');
        });
        inputIcon[i].addEventListener('mouseup', function () {
            var element = this;
            setTimeout(function () {
                element.classList.remove('e-input-btn-ripple');
            }, 500);
        });
    }
</script>

<style>
    .e-input-group-icon:before {
        font-family: e-icons;
    }

    .e-input-group .e-input-group-icon.e-input-popup-date { /* csslint allow: adjoining-classes */
        font-size: 16px;
    }

    .e-input-group.e-small .e-input-group-icon.e-input-popup-date { /* csslint allow: adjoining-classes */
        font-size: 14px;
    }

    .e-input-group-icon.e-input-popup-date:before { /* csslint allow: adjoining-classes */
        content: "";
    }
</style>
public ActionResult Index()
{
    return View();
}