Sizing in ASP.NET Core TextBox component

24 Oct 20247 minutes to read

You can render the TextBox in three different sizes.

Property	Description
Normal	By default, the TextBox is rendered with normal size.
Small	You need to add e-small class to the cssClass property to render the TextBox in smaller size.
Bigger	You need to add e-bigger class to the cssClass property to render the TextBox in bigger size.

CSHTML

<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>

Sizing.cs

public ActionResult Index()
{
    return View();
}