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 the TextArea can be configured to automatically adjust its height according to the entered content.

Setting initial Rows and Cols

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

Example
View Source
Edit In Stackblitz  
Change Theme:

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 TextArea component has a fixed width of 18em applied out of the box. This might 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

In order 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 could still update it manually through the cols option or via CSS.

Example
View Source
Edit In Stackblitz  
Change Theme:

Disable Resizing

In order 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: