ResizableTextArea is a multi-line text editor field with the ability to change the size.

resizable text area

Component’s XML-name: resizableTextArea.


ResizableTextArea replicates the functionality of the TextArea component and has only one specific attribute:

resizableDirection - defines the way a user can change the size of the component. There are the following possible values:

  • BOTH - default value. The component is resizable in both directions.

  • VERTICAL - the component is resizable only vertically.

  • HORIZONTAL - the component is resizable only horizontally.

  • NONE - the component can not be resized.

Usage example:

<resizableTextArea caption="ResizableTextArea"

Note that the component stops supporting resizing in a corresponding direction if you set the size for the component in a percentage. For example, if you define:

  • resizableDirection="VERTICAL" and set height in percentage.

  • resizableDirection="HORIZONTAL" and set width" in percentage.

  • resizableDirection="BOTH" and set either width or height in percentage.

In all the cases described above, the component will not support resizing.


You can track resizing using the ResizeEvent handler. For example:

<resizableTextArea id="resizableTextArea"/>
private Notifications notifications;

public void onResizableTextAreaResize(ResizableTextArea.ResizeEvent event) {
            withCaption("prevHeight:" + event.getPrevHeight()
                    + "; prevWidth:" + event.getPrevWidth()
                    + "; height:" + event.getHeight()
                    + "; width:" + event.getWidth())