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?