Configure multiline text fields in the XML Editor to automatically adjust their height to fit the content.


Introduction

The Editfield widget in the XML Editor can be adjusted to the optional content. If more text is entered and there is room in the existing rows, the widget also grows, if the text is deleted, it shrinks again.

Example

In an editorial workflow, typically only smaller comments are attached to assets. If, however, users want to add more text, they can do so and the input area will adjust its size automatically. The feature prevents an input box from taking up too much space in the interface. This makes the user interface look much cleaner and easier to use.

Configuration

In order to execute the widget in this mode, the attribute scrollpane = "false" has to be set. Additionally, it makes sense to limit the maximum height of the input field to an appropriate level via the attribute maxheight. The field then will only grow up to this maximum value. Above that maximum, a scroll bar will appear. The maximum height can be defined in pixels or other XML editor-length units.

$stringEscapeUtils.escapeHtml($body)
CODE

The optional attribute "rows" can be set to determine the minimum number of rows or the minimum height of the text field in rows. A blank field therefore always has exactly this number of rows.

Case study:

The following code snippet creates a self-growing text box with a minimum height of 3 rows and a maximum height of 200 pixels.

<xe:edittext source="@annotation" scrollpane="false" rows="3" weight-x="1" maxheight="200"/>
CODE