Rows and Columns in Vue TextArea Component

15 Jun 20243 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 component 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.
<template>
  <div class='wrap'>
    <div id='input-container'>
      <div>
        <ejs-textarea id="default1" placeholder="Enter your comments" floatLabelType="Auto" :rows="3"
          :cols="35"></ejs-textarea>
      </div>
      <div>
        <ejs-textarea id="default2" placeholder="Enter your comments" floatLabelType="Auto" :rows="5"
          :cols="40"></ejs-textarea>
      </div>
    </div>
  </div>
</template>
<script setup>
import { TextAreaComponent as EjsTextarea } from '@syncfusion/ej2-vue-inputs';

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

.wrap {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 20px 10px;
  width: 340px;
}
</style>
<template>
  <div class='wrap'>
    <div id='input-container'>
      <div>
        <ejs-textarea id="default1" placeholder="Enter your comments" floatLabelType="Auto" :rows="3"
          :cols="35"></ejs-textarea>
      </div>
      <div>
        <ejs-textarea id="default2" placeholder="Enter your comments" floatLabelType="Auto" :rows="5"
          :cols="40"></ejs-textarea>
      </div>
    </div>
  </div>
</template>
<script>
import { TextAreaComponent } from '@syncfusion/ej2-vue-inputs';

export default {
  name: "App",
  components: {
    "ejs-textarea": TextAreaComponent
  },
  data: function () {
    return {}
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

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