Rows and Columns in EJ2 TypeScript TextArea Control

7 May 20254 minutes to read

Two Essential® attributes, rows and columns, play a pivotal role in customizing the TextArea’s appearance and layout.
The rowsattribute determines the initial visible number of lines within the TextArea, controlling its vertical size. Conversely, the columns attribute specifies the visible width of the TextArea in characters per line, determining its initial width.

  • You can customize the TextArea control by setting the number of rows using the rows property and the number of columns using the cols property. These properties allow precise control over the dimensions of the TextArea, ensuring it fits seamlessly within the layout of the application.
import { TextArea } from "@syncfusion/ej2-inputs";
// Initialize the TextArea controls.
let textareaObj1: TextArea = new TextArea({
  placeholder: "Enter your comments",
  rows: 3,
  cols: 35,
  floatLabelType: "Auto",
});

textareaObj1.appendTo("#default1");

let textareaObj2: TextArea = new TextArea({
  placeholder: "Enter your comments",
  rows: 5,
  cols: 40,
  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="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/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 class="col-xs-12 col-sm-12 col-lg-12 col-md-12 ">
                    <textarea id="default1"></textarea>
                </div>
                <div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
                    <textarea id="default2"></textarea>
                </div>
            </div>
        </div>
    </div>
</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: 30px 10px;
    width: 260px;
}