Getting Started
    Components
    • Barcodes
    • Buttons
    • Charts
    • Conversational UI
    • Data Query
    • Date Inputs
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filterupdated
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicatorsupdated
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Mapbeta
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PivotGridupdated
    • Popup
    • ProgressBarsupdated
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • ToolBar
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Typography
    • Uploads
    • Utilitiesnew
    Styling & Themes
    Common Features
    Project Setup
    Troubleshooting
New to Kendo UI for Angular? Start a free 30-day trial

Setting the Width

The Input components have different default width, depending on their rendering and purpose.

Some Inputs (like the Switch or ColorPicker) have specific width applied out of the box, as this is essential for UX consistency and proper component functionality. Other Input components (like the NumericTextBox or TextArea), have a default width of 100%, thus their sizing is left for the developer to handle per case.

The following list outlines the default widths of the Inputs:

  • Inputs with specific default widthCheckbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, RangeSlider, Slider, Switch.
  • Inputs with a default width of 100%MaskedTextBox, NumericTextBox, TextArea, TextBox.

All Inputs allow you to customize their width via CSS. To achieve this, utilize the width CSS property.

The following example demonstrates how to specify the width of the Inputs.

Example
View Source
Change Theme:

In this article

Not finding the help you need?