Multi-Line Input

I’m trying to use an input box as a large text field. I’ve enabled multi-line input, and populated with multi-line data. I do get the vertical scroll bar and can scroll to see the multiple lines, but the input field itself is still only 1 line at a time. How can I expand to show 20+ lines at once? As in, if I were creating a basic text editor, how can I make this input field show the full text?

1 Like

Figured it out!

I needed to isolate the text input field and modify the height of the input area (modifying the height of just the component wasn’t working). Now I have a full-size text box with all text visible.


@Joe_Taylor I’m having a similar issue. how did you modify the height? I have a form that has text input field. I expect the input field to grow in height as the length of the input text increases. I have enabled multi-line input but I notice that only new lines are shown as the user types. Previous lines are not visible so the user can’t see their full text. I wish their is a text-area component like in basic html.

Edit the Input Field in Isolation mode (where you can access the Text Input field properties), and edit the Text Input Height property.


@JOHN_WORSHAM Thanks a lot. I got it.

@Mevi @Sasu_Makinen

Hi all, could you please tell me the formula to set the Text Input Height to, so that the Input box keeps growing with each new line of text?

I am unable to lookup a variable that would allow to calculate the expected Height value for a Multi-Line Text input.


I haven’t (at least yet) figured out a way to have the text input grow with text rows added, only setting a certain height to the input box :thinking:

Hi @S_MittalM,

I couldn’t do that. I think it’s okay to give it a fixed height, maybe 300px. It also comes with a scroll, so the user can scroll up and down to read their full text input. Remember that the default HTML textarea has the rows and columns attributes to help determine the height of your textarea. If you desire it to grow with the text, it can grow endlessly. That won’t be good for user experience :grinning:


You can bind the input field content to page variable (ex. inputField) and then set input height to use formula LENGTH(SPLIT(pageVars.inputField,"\n"))*18 where 18 is the line height of the input. Also I would recommend to set input minimum height to 18 as well.


Don’t work your formula

I didn’t understand very well, how did you do it?

Has anyone managed to get this to work?

I was able to get this to work.

Step 1. In input field “Layout”, change the “Width and Height” to “Custom”. Allow the Width to to go max-width and set the height to be something that would allow the display of several rows.

Step 2. Edit the input fields “Style class” to wrap overflowing components in a new line and ensure "clip overflowing content is set to “no”.

This will allow the overflowing text to go into multiple lines, and for the lines to be seen. It seems to work on my cellphone preview in the AppGyver app but not on web-preview. I’ll update this post when I know if this worked in the released app.