How to have a form grow vertically with text

Ask us anything How do I?
1

Hi there!

I’m struggling to get the vertical wrapper for inputs to grow as one continues to type. Ideally just like any messaging app, if you type enough in the form, it just adds a line inside the form. that way one can see most of what they’ve typed before hitting some kind of max and forcing scrolling.

It seems that all the forms I’ve tried this with just cannot line break except for the long answer. However the long answer doesn’t seem to give me control over its initial height (intended 1 line to start)

This is a strange situation I’m in as it seems that all of the form wrappers don’t allow for dynamic verticals growth. Short answer just doesn’t seem to be able line break at all (even with no wrap set to off), and long answer doesn’t grow height dynamically. Once all the present lines are filled, it switches to a scrollbar (even when overflow is set to hidden!)

image
image620×577 30 KB

The form container itself has an auto height so it should be able to grow within that container.

Any thoughts or suggestions would be appreciated!

2 Likes
2

I’ve had the same question lots of times

3

I also spent a lot of time looking for a solution. I would appreciate any help.

4

Hello!

If it doesn’t need to be a traditional input, you can adapt a Rich Text Input to increase the height as you type.

Follow comparison video: Input Long x Rich Text

You can also try the text-overflow option so that the text ends up with “…” after reaching the maximum size limit.

Best Regards,

5

Finally figured it out without having to use a Rich text input.

In short…

  • Use Long Text
  • Set Rows to 1
  • Add an On Change worflow
  • add one Javascript node and put this in it
function adjustTextareaHeight(context) {
    const textarea = context.thisInstance.querySelector('textarea');
    if (!textarea) return "0px";
    
    const scrollPos = textarea.scrollTop;
    textarea.style.height = 'auto';
    const newHeight = textarea.scrollHeight;
    textarea.style.height = `${newHeight}px`;
    textarea.scrollTop = scrollPos;
    
    return `${newHeight}px`;
}

return adjustTextareaHeight(context);
2 Likes
6

Hi @Micah , I’ve tried your technique and it’s not working for me. Is there anything missing? Also, does it work when the user is clearing the content completely from the text input?

7

Did you set textarea as Class in the HTML attributes of your element?
(the same textarea in context.thisInstance.querySelector('textarea'))

8

I forked the basic input repo and added the dynamic height option… you can fork it and use it in your project (when using it, you will need to define background color, border color, etc… it does not come filled by default)

image
image330×273 14.2 KB

Link to the repo:

9

Create a variable (for example, textareaHeight) of type Text, with an initial value such as 43px, which will be responsible for dynamically storing the field height. Then, in the Textarea (Long Answer) component, create a workflow on the On Change event and add a Set Variable action using Run JavaScript with the following code:

const textarea = document.querySelector('textarea');
if (!textarea) return '43px';

textarea.style.height = 'auto';
return textarea.scrollHeight + 'px';

This ensures the height is recalculated correctly both when text is added and when it is removed. Finally, go to the input properties, change the class to textarea, and bind the Height property to this variable ({{ textareaHeight }}), so the component dynamically adjusts and automatically updates its height whenever the text is modified.

1 Like