Sizing in EJ2 TypeScript Textbox control

4 Jan 20256 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 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

index.ts
index.html
styles.css
import {TextBox } from '@syncfusion/ej2-inputs';
/**
 *   Sample for CSS input boxes.
 */

let normalTextBox: TextBox = new TextBox({
  placeholder: 'Enter the text',
  floatLabelType: 'Never',
});
normalTextBox.appendTo('#normal');
let normalFloatTextBox: TextBox = new TextBox({
  placeholder: 'Enter the text',
  floatLabelType: 'Auto',
});
normalFloatTextBox.appendTo('#normalFloat');
let normalIconTextBox: TextBox = new TextBox({
  placeholder: 'Enter the text',
  floatLabelType: 'Auto',
  created: function () {
    normalIconTextBox.addIcon('append', 'e-date-icon');
  },
});
normalIconTextBox.appendTo('#normalIcon');
let smallTextBox: TextBox = new TextBox({
  placeholder: 'Enter the text',
  floatLabelType: 'Never',
  cssClass: "e-small"
});
smallTextBox.appendTo('#small');
let smallFloatTextBox: TextBox = new TextBox({
  placeholder: 'Enter the text',
  floatLabelType: 'Auto',
  cssClass: "e-small"
});
smallFloatTextBox.appendTo('#smallFloat');
let smallIconTextBox: TextBox = new TextBox({
  placeholder: 'Enter the text',
  floatLabelType: 'Auto',
  cssClass: "e-small",
  created: function () {
    smallIconTextBox.addIcon('append', 'e-date-icon');
  },
});
smallIconTextBox.appendTo('#smallIcon');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 TextBox</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 TextBox 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> Normal Size </h4>

            <div>
              <input id="normal" type="text" placeholder="Enter Name" />
            </div>
      
            <div >
              <input id="normalFloat"  type='text' required />
            </div>
      
            <div>
              <input id="normalIcon"  type="text" placeholder="Enter Date" />
            </div>
      
            <h4> Small Size </h4>
      
            <div >
              <input id="small" type="text" placeholder="Enter Name" />
            </div>
      
            <div >
              <input id="smallFloat" type='text' required />
            </div>
      
            <div >
              <input id="smallIcon" type="text" placeholder="Enter Date" />
            </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: 20px 10px;
  width: 340px;
}