New to Kendo UI for Angular? Start a free 30-day trial

TextArea Sizing

The TextArea provides multiple configuration options for tweaking its dimensions.

You can specify the initial width and height, the directions in which the user will be able to resize the textarea element afterwards, or to render the component with a fixed size. On top of that, you can also configure the TextArea to automatically adjust its height according to the entered content.

Setting Initial Rows and Columns

To set the initial size of the TextArea, use its rows and cols properties.

Example
View Source
Edit In Stackblitz  
Change Theme:

Setting the Resize Directions

By default, the Textarea can only be resized vertically. To allow for other resize directions, set the resizable property to horizontal or both.

The default fixed width of the TextArea component is 18em. This may cause a visual discrepancy during horizontal resizing, because the width of the internal textarea element will differ from the width of the component itself. To prevent this behavior, set the width of the TextArea component to auto.

Example
View Source
Edit In Stackblitz  
Change Theme:

Auto-Resizing

To automatically adjust the height of the TextArea as the user types, set its resizable property to auto.

The width of the TextArea will not be adjusted in this case. You can still update it manually through the cols option or with CSS.

Example
View Source
Edit In Stackblitz  
Change Theme:

Disabling Resizing

To render the TextArea with a fixed size and disable the resizing, set its resizable property to none.

Example
View Source
Edit In Stackblitz  
Change Theme: