HelpBot Assistant

How can I help you?

Sizing in Angular TextBox Component

26 Feb 20262 minutes to read

The TextBox component supports three distinct sizing options to accommodate different design requirements and user interface contexts. Each size variant maintains consistent functionality while providing visual flexibility for various application layouts.

Property Description
Normal By default, the TextBox is rendered with normal size.
Small Add the e-small class to the cssClass property to render a smaller-sized TextBox.
Large Add the e-bigger class to the cssClass property to render a larger-sized TextBox.

Implementation

Use the appropriate CSS class through the cssClass property to achieve the desired TextBox size. The small variant works well in compact interfaces or dense data entry forms, while the large variant provides better accessibility and prominence in primary input scenarios.

Note: Further customize the TextBox appearance by using the cssClass property to add custom classes that apply additional styling to meet specific design requirements.

import { FormsModule } from '@angular/forms'
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { Component } from '@angular/core';

@Component({
imports: [
        TextBoxModule,
        FormsModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="wrap">
                <h4> Bigger Size </h4>
                <ejs-textbox placeholder = "Enter Name" floatLabelType="Auto" cssClass="e-bigger"></ejs-textbox>
                <h4> Small Size </h4>
                <ejs-textbox placeholder = "Enter Name" floatLabelType="Auto" cssClass="e-small"></ejs-textbox>
              </div>`
})

export class AppComponent {
  
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));