ResizableTextArea

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

resizable text area

Component’s XML-name: resizableTextArea.

Basics

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"
                   width="200px"
                   resizableDirection="VERTICAL"/>

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.

ResizeListener

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

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

@Subscribe("resizableTextArea")
public void onResizableTextAreaResize(ResizableTextArea.ResizeEvent event) {
    notifications.create().
            withCaption("prevHeight:" + event.getPrevHeight()
                    + "; prevWidth:" + event.getPrevWidth()
                    + "; height:" + event.getHeight()
                    + "; width:" + event.getWidth())
            .show();
}