Contact Us

K2 Five 19 October 2020

A way of implementing resizing of a text area in the process of entering data by a user

Using this method, the text area will change its size in height depending on the number of strings entered by the user.

The resizing of the text area will work on the JQuery script. For implementation, we need to create a DataLabel on the View, for example, with the name “dlResizeJS”, select the Literal option.

We  should create two expressions:

  1. The first expression, for example with the name “exp Resize TextArea” and write our script into it, which is responsible for resizing all TextArea on the form:

  1. Create the second expression, for example, with the name “exp Dynamic TextAreaSize” and also write our script into it. This variable is responsible for resizing the TextArea in accordance with the user input into it:

Expression fields stay empty.

Next, let’s create a rule in which a script must be called upon initialization. To do this, add two “transfer data” rules to it:

We will pass “exp Resize TextArea” in the first “configure” from the Expression tab to the DataLabel “dlResizeJS”:

We will pass “exp Dynamic TextAreaSize” in the second “configure” from the Expression tab, also to the DataLabel “dlResizeJS”:

So, the scripts will be executed successively.


A few words about the script.

The script checks the length and sets the height of the text area.

Also tracks keystrokes on the keyboard. Thus, after deleting lines of text, the height of the text area is reduced based on the number of lines deleted.