Sizing in EJ2 JavaScript Textbox control

4 Jan 20257 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 
ej.base.enableRipple(true);

var normalTextBox= new ej.inputs.TextBox({
    placeholder: 'Enter the text',
    floatLabelType: 'Never',
  });
  normalTextBox.appendTo('#normal');
  var normalFloatTextBox= new ej.inputs.TextBox({
    placeholder: 'Enter the text',
    floatLabelType: 'Auto',
  });
  normalFloatTextBox.appendTo('#normalFloat');
  var normalIconTextBox= new ej.inputs.TextBox({
    placeholder: 'Enter the text',
    floatLabelType: 'Auto',
    created: function () {
      normalIconTextBox.addIcon('append', 'e-date-icon');
    },
  });
  normalIconTextBox.appendTo('#normalIcon');
  var smallTextBox= new ej.inputs.TextBox({
    placeholder: 'Enter the text',
    floatLabelType: 'Never',
    cssClass: "e-small"
  });
  smallTextBox.appendTo('#small');
  var smallFloatTextBox= new ej.inputs.TextBox({
    placeholder: 'Enter the text',
    floatLabelType: 'Auto',
    cssClass: "e-small"
  });
  smallFloatTextBox.appendTo('#smallFloat');
  var smallIconTextBox= new ej.inputs.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>

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