Sizing in EJ2 JavaScript TextArea Control

25 Mar 202424 minutes to read

you can adjust the size of the TextArea by applying specific classes:

Property Description
Small Add the e-small class to the input element or its container to render a smaller-sized TextArea.
Bigger Add the e-bigger class to the input element or its container to render a larger-sized TextArea.

By applying these classes, users can easily customize the appearance of the TextArea to better fit their application’s design requirements.

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

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

// Add 'e-input-focus' class to the textarea on focus.

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');
        }
    });
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 TextArea</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 TextArea Components" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
      <div class='wrap'>
          <div id="input-container">
              <h4> Small Size </h4>

              <div class="e-input-group e-small">
                  <textarea class="e-input" placeholder="Enter your comments"></textarea>
              </div>

              <h4> Bigger Size </h4>

              <div class="e-input-group e-bigger">
                  <textarea class="e-input" placeholder="Enter your comments"></textarea>
              </div>
          </div>
      </div>
  </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 20px 10px;
  width: 340px;
}

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

#input-container .e-input-group { /* csslint allow: adjoining-classes */
  margin: 30px 0;
}

#input-container .e-float-input { /* csslint allow: adjoining-classes */
  margin: 30px 0;
}

Filled and outline mode

The Filled and Outline modes can be enabled in the TextArea control by adding the e-outline or e-filled class to the cssClass API.
By adding these classes, users can choose between a filled or outline appearance for the TextArea control, aligning with the design aesthetics of their application.

// Initialize TextArea component with cssClass 'e-filled'
var filledTextArea = new ej.inputs.TextArea({
    placeholder: 'Filled',
    cssClass: 'e-filled',
    floatLabelType: 'Auto'
});
filledTextArea.appendTo('#filled');

// Initialize TextArea component with cssClass 'e-outline'
var outlineTextArea = new ej.inputs.TextArea({
    placeholder: 'Outlined',
    cssClass: 'e-outline',
    floatLabelType: 'Auto'
});
outlineTextArea.appendTo('#outlined');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 TextArea</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 TextArea Components" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <label class="custom-input-label"> Filled TextArea </label>
    <div id='container'>
        <textarea id='filled'></textarea>
    </div>
    <label class="custom-input-label"> Outlined TextArea </label>
    <div id='container1'>
        <textarea id='outlined'></textarea>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 20px 10px;
  width: 340px;
}

Note: Filled and Outline theme customization are available only with Material themes.

Custom styling with cssClass API in TextArea

The cssClass Api provides a powerful way to apply custom styling to the TextArea control, allowing users to customize its appearance and layout according to their design requirements.

By utilizing the cssClass API, users can apply custom CSS classes to the TextArea control’s container, enabling control over its styling properties such as color, padding, margins, borders, and more.

// Initialize TextArea component with custom cssClass
var textareaObj = new ej.inputs.TextArea({
    placeholder: 'Enter your comments',
    cssClass: 'custom-textarea',
    floatLabelType: 'Auto'
});
textareaObj.appendTo('#default');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 TextArea</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 TextArea Components" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div class='wrap'>
            <div id="input-container">
                <textarea id="default"></textarea>
            </div>
        </div>
    </div>
<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
  visibility: hidden;
}

/* Custom CSS class for TextArea styling */
#container .custom-textarea {
  border: 2px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  background-color: antiquewhite;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 20px 10px;
  width: 340px;
}

Setting the disabled state in TextArea

To disable the TextArea, you can utilize the enabled property. When set to false, the TextArea becomes disabled, preventing user interaction.

// Initialize TextArea control
var textareaObj= new ej.inputs.TextArea({
    enabled: false
});

textareaObj.appendTo('#default');

Set the readonly TextArea

To make the TextArea read-only , you can use the readonly property. When set to true, it prevents users from editing the content of the TextArea.

// Initialize TextArea control
var textareaObj= new ej.inputs.TextArea({
    value: 'Readonly',
    readonly: true
});

textareaObj.appendTo('#default');

Set the rounded corner in TextArea

Render the TextArea with rounded corner by adding the e-corner class to the input parent element.

This rounded corner is visible only in box model input component

<div class="e-input-group e-corner">
    <textarea class="e-input" placeholder="Enter your comments"></textarea>
</div>

Static Clear Button in TextArea

To display a static clear button in the TextArea control, you can add the e-static-clear class to the cssClass property. This class ensures that the clear button remains visible at all times, providing users with the ability to easily clear the TextArea content without needing to focus on the control.

// Initialize TextArea component with custom cssClass
var textareaObj = new ej.inputs.TextArea({
    placeholder: 'Enter your comments',
    cssClass: 'e-static-clear',
    showClearButton: true
});
textareaObj.appendTo('#default');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 TextArea</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 TextArea Components" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div class='wrap'>
            <div id="input-container">
                <textarea id="default"></textarea>
            </div>
        </div>
    </div>
<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 20px 10px;
  width: 340px;
}

Customize the TextArea background color and text color

You can customize the TextArea styles such as background-color, text-color and border-color by overriding its default styles to achieve the desired appearance for the TextArea.

var textareaObj1 = new ej.inputs.TextArea({
    placeholder: 'Enter your comments',
    floatLabelType: 'Auto'
});
textareaObj1.appendTo('#default');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 TextArea</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 TextArea Components" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div class='wrap'>
            <div id="input-container">
                <textarea id="default"></textarea>
            </div>
        </div>
    </div>
<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 20px 10px;
  width: 340px;
}

/* To change the background-color and text-color for textarea */ 
.e-input-group,
.e-float-input,
.e-float-input.e-input-group { /* csslint allow: adjoining-classes */
  background : lightgray;
  color: green;
}

/* To change the border-color of the textarea */ 
.e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left),
.e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left) { /* csslint allow: adjoining-classes */
  border-color: #0800ff;
}

Change the floating label color of the TextArea

You can change the floating label color of the TextArea for both success and warning validation states by applying the following CSS styles.

    /* For Success state */
    .e-float-input.e-success label.e-float-text,
    .e-float-input.e-success input:focus ~ label.e-float-text,
    .e-float-input.e-success input:valid ~ label.e-float-text {
      color: #22b24b;
    }

    /* For Warning state */
    .e-float-input.e-warning label.e-float-text,
    .e-float-input.e-warning input:focus ~ label.e-float-text,
    .e-float-input.e-warning input:valid ~ label.e-float-text {
      color: #ffca1c;
    }
var textareaObj1 = new ej.inputs.TextArea({
    placeholder: 'Success',
    cssClass: 'e-success',
    floatLabelType: 'Auto'
});
textareaObj1.appendTo('#default1');

var textareaObj2 = new ej.inputs.TextArea({
    placeholder: 'Warning',
    cssClass: 'e-warning',
    floatLabelType: 'Auto'
});
textareaObj2.appendTo('#default2');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 TextArea</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 TextArea Components" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div class='wrap'>
            <div id="input-container">
                <div>
                    <textarea id="default1"></textarea>
                </div>
                <div>
                    <textarea id="default2"></textarea>
                </div>
            </div>
        </div>
    </div>
<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 20px 10px;
  width: 340px;
}

.e-float-input.e-success label.e-float-text{ /* csslint allow: adjoining-classes */
  color: #22b24b;
}
.e-float-input.e-success input:focus ~ label.e-float-text{ /* csslint allow: adjoining-classes */
  color: #22b24b;
}
.e-float-input.e-success input:valid ~ label.e-float-text { /* csslint allow: adjoining-classes */
  color: #22b24b;
}

.e-float-input.e-warning label.e-float-text{ /* csslint allow: adjoining-classes */
  color: #ffca1c;
}
.e-float-input.e-warning input:focus ~ label.e-float-text{ /* csslint allow: adjoining-classes */
  color: #ffca1c;
}
.e-float-input.e-warning input:valid ~ label.e-float-text { /* csslint allow: adjoining-classes */
  color: #ffca1c;
}

Adding mandatory asterisk to placeholder

To add a mandatory asterisk (*) to the placeholder in the TextArea control, you can utilize CSS to append the asterisk after the placeholder text.

/* To add asterick to float label in textarea */ 
.e-float-input.e-control-wrapper .e-float-text::after {
  content: '*'; /* Add asterisk after the placeholder */
  color: red; /* Customize asterisk color */
}
var textareaObj1 = new ej.inputs.TextArea({
    placeholder: 'Enter your comments',
    floatLabelType: 'Auto'
});
textareaObj1.appendTo('#default');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 TextArea</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 TextArea Components" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div class='wrap'>
            <div id="input-container">
                <textarea id="default"></textarea>
            </div>
        </div>
    </div>
<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 20px 10px;
  width: 340px;
}

/* To add asterick to float label in textarea */ 
.e-float-input.e-control-wrapper .e-float-text::after {
  content: '*';
  color: red;
}