# Best way to dynamically expand a text / form input?

**URL:** <https://community.weweb.io/t/best-way-to-dynamically-expand-a-text-form-input/8281>\
**Category:** How do I?\
**Created:** [April 24, 2024, 1:23pm UTC](https://community.weweb.io/t/best-way-to-dynamically-expand-a-text-form-input/8281 "2024-04-24T13:23:55Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mark\_Pederson](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mark_pederson/32/14758_2.png) [@Mark\_Pederson](https://community.weweb.io/u/Mark_Pederson)\
**Post date:** [April 24, 2024, 1:23pm UTC](https://community.weweb.io/t/best-way-to-dynamically-expand-a-text-form-input/8281/1 "2024-04-24T13:23:55Z")

</div>

How can I expand the vertical size of a text input vertically as more text is added (without scroll) - just dynamically expand the input vertically?

In the form input - if you select long answer - there is a setting for ROWS:

 ![rows](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/3/3bc90c810a9847e6b607c197cb21cc7a433566ff.jpeg)

I wonder if WeWeb could make this bindable? And you set it based on a formula based on character length or scroll position???

Is there another way to do now without a custom component?

---

<div class="post-metadata">

**Author:** ![Doc](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/doc/32/8594_2.png) [@Doc](https://community.weweb.io/u/Doc)\
**Post date:** [April 28, 2024, 4:33am UTC](https://community.weweb.io/t/best-way-to-dynamically-expand-a-text-form-input/8281/2 "2024-04-28T04:33:48Z")

</div>

Thank you for your question. Let me check with the team and see how we can assist you. I will get back to you as soon as possible.

---

<div class="post-metadata">

**Author:** ![Dom](https://avatars.discourse-cdn.com/v4/letter/d/aeb1de/32.png) [@Dom](https://community.weweb.io/u/Dom)\
**Post date:** [May 2, 2024, 2:27am UTC](https://community.weweb.io/t/best-way-to-dynamically-expand-a-text-form-input/8281/3 "2024-05-02T02:27:43Z")

</div>

Same, been trying to work this out for ages.

---

<div class="post-metadata">

**Author:** ![se.belobrov](https://avatars.discourse-cdn.com/v4/letter/s/ecb155/32.png) [@se.belobrov](https://community.weweb.io/u/se.belobrov)\
**Post date:** [May 2, 2024, 8:50am UTC](https://community.weweb.io/t/best-way-to-dynamically-expand-a-text-form-input/8281/4 "2024-05-02T08:50:31Z")

</div>

ask ChatGPT to do the JS for you. I decided it this way.

---

<div class="post-metadata">

**Author:** ![Mark\_Pederson](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mark_pederson/32/14758_2.png) [@Mark\_Pederson](https://community.weweb.io/u/Mark_Pederson)\
**Post date:** [May 2, 2024, 11:31am UTC](https://community.weweb.io/t/best-way-to-dynamically-expand-a-text-form-input/8281/5 "2024-05-02T11:31:44Z")

</div>

Do you have this working with custom JS? If so, can you share the script?

---

<div class="post-metadata">

**Author:** ![se.belobrov](https://avatars.discourse-cdn.com/v4/letter/s/ecb155/32.png) [@se.belobrov](https://community.weweb.io/u/se.belobrov)\
**Post date:** [May 2, 2024, 12:24pm UTC](https://community.weweb.io/t/best-way-to-dynamically-expand-a-text-form-input/8281/6 "2024-05-02T12:24:44Z")

</div>

In my case this code works

```auto
document.getElementById('messageFormChat').addEventListener('submit', function(e) {
    e.preventDefault(); // Предотвращаем стандартное поведение формы
    const textarea = document.getElementById('messageInputChat');
    const text = textarea.value.trim();
    if (text) {
        console.log("Сообщение отправлено: ", text); // Здесь ваш код для отправки сообщения
        textarea.value = ''; // Очистка textarea после отправки
        textarea.style.height = 'auto'; // Сброс высоты до начального значения для одной строки
    }
});

document.getElementById('messageInputChat').addEventListener('keydown', function(e) {
    if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault(); // Предотвращаем перевод строки при нажатии Enter без Shift
        document.getElementById('messageFormChat').dispatchEvent(new Event('submit', {cancelable: true}));
    }
});

document.getElementById('messageInputChat').addEventListener('input', function(e) {
    const textarea = e.target;
    textarea.style.height = 'auto'; // Сброс перед пересчетом, чтобы правильно измерить scrollHeight
    let scrollHeight = textarea.scrollHeight;
    let newHeight = scrollHeight > 300 ? 300 : scrollHeight; // Ограничение высоты до максимума для 15 строк
    textarea.style.height = `${newHeight}px`;
});

```

I just run it in WF when the page loads

---

<div class="post-metadata">

**Author:** ![archenia\_jsanchez](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/archenia_jsanchez/32/8656_2.png) [@archenia\_jsanchez](https://community.weweb.io/u/archenia_jsanchez)\
**Post date:** [May 2, 2024, 1:57pm UTC](https://community.weweb.io/t/best-way-to-dynamically-expand-a-text-form-input/8281/7 "2024-05-02T13:57:29Z")

</div>

Another option that crossed my mind was to control the `rows` using the HTML attributes, which is bindable, but we can rule that out. It appears the native component overrides the HTML attribute.

Edit:  
I see that the GIF is not the best quality so you might not be able to follow what I am doing here:

1. you can see me highlight the `<textarea>` in the Inspector;
2. I then edit the rows using the native component element—you’ll see in the Inspector the `rows` updating in real time
3. I then go to the HTML attributes section in WeWeb and try to add “rows,” which you’ll see the Inspector accepting _until_ I type the full “rows” with an “s” at which it disappears from the Inspector.

![Export-1714658089636](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/99eb345f1cebd66cde2bebc0a33a17259612902e.gif)

---

<div class="post-metadata">

**Author:** ![Mark\_Pederson](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mark_pederson/32/14758_2.png) [@Mark\_Pederson](https://community.weweb.io/u/Mark_Pederson)\
**Post date:** [May 2, 2024, 2:39pm UTC](https://community.weweb.io/t/best-way-to-dynamically-expand-a-text-form-input/8281/8 "2024-05-02T14:39:23Z")

</div>

Yeah - I tried that too. They should just add “expand rows with content” option in the “Long answer” option of Input component.

Any thoughts @Alexis ??

---

<div class="post-metadata">

**Author:** ![Alexis](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/alexis/32/13248_2.png) [@Alexis](https://community.weweb.io/u/Alexis)\
**Post date:** [May 2, 2024, 3:05pm UTC](https://community.weweb.io/t/best-way-to-dynamically-expand-a-text-form-input/8281/9 "2024-05-02T15:05:20Z")

</div>

I think you can create a ticket on [support.weweb.io](http://support.weweb.io) asking for making rows bindable, it should be accepted as a bug and be pushed in production in the next two weeks easily 🙂

@Mark_Pederson I think the suggestion is interesting, I will create a product ticket and ask the team if we want to implement it inside our input or let people do it themself with the (future) bindable rows

---

<div class="post-metadata">

**Author:** ![mark](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mark/32/4163_2.png) [@mark](https://community.weweb.io/u/mark)\
**Post date:** [July 27, 2024, 1:22am UTC](https://community.weweb.io/t/best-way-to-dynamically-expand-a-text-form-input/8281/10 "2024-07-27T01:22:34Z")

</div>

Now that it’s bindable, how do you go about setting it dynamically so that it expands? Doing it by character length seems easy sometimes the length of that varies

---

<div class="post-metadata">

**Author:** ![tcc](https://avatars.discourse-cdn.com/v4/letter/t/df705f/32.png) [@tcc](https://community.weweb.io/u/tcc)\
**Post date:** [October 21, 2024, 12:10pm UTC](https://community.weweb.io/t/best-way-to-dynamically-expand-a-text-form-input/8281/11 "2024-10-21T12:10:30Z")

</div>

Hi everyone, now that the rows are bindable, how do we make the long answer dynamically expand? Thanks

---

<div class="post-metadata">

**Author:** ![dereckbolsanelo](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dereckbolsanelo/32/14065_2.png) [@dereckbolsanelo](https://community.weweb.io/u/dereckbolsanelo)\
**Post date:** [June 4, 2025, 2:18pm UTC](https://community.weweb.io/t/best-way-to-dynamically-expand-a-text-form-input/8281/12 "2025-06-04T14:18:55Z")

</div>

Were you able to find a good solution for this? I’m also looking into the best way to achieve this now. thanks

---

<div class="post-metadata">

**Author:** ![dereckbolsanelo](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dereckbolsanelo/32/14065_2.png) [@dereckbolsanelo](https://community.weweb.io/u/dereckbolsanelo)\
**Post date:** [June 4, 2025, 10:18pm UTC](https://community.weweb.io/t/best-way-to-dynamically-expand-a-text-form-input/8281/13 "2025-06-04T22:18:39Z")

</div>

Hi everyone,

For those looking into a solution for dynamically expanding ‘long answer’ (textarea) inputs in WeWeb, I found that applying the following custom CSS property worked for me:

`field-sizing: content;`

I’ve attached a screenshot showing where this can be added in the WeWeb editor. This allowed the textarea to auto-size with the content.

 ![Captura de tela 04.06.2025 às 19.14.04 PM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/7/7278a09db3f54a2698ca36617812da756626d5a9.png)

Hope this is helpful.

---

<div class="post-metadata">

**Author:** ![Dom](https://avatars.discourse-cdn.com/v4/letter/d/aeb1de/32.png) [@Dom](https://community.weweb.io/u/Dom)\
**Post date:** [June 4, 2025, 11:35pm UTC](https://community.weweb.io/t/best-way-to-dynamically-expand-a-text-form-input/8281/14 "2025-06-04T23:35:44Z")

</div>

Thanks @dereckbolsanelo I found this works!

I also wanted my field to be the equivalent of say, 3 rows, even when empty. This CSS alone won’t do this, even when setting rows. To achieve this, I set min-height px to whatever 3 rows is in your UI - in my case I did a bit of trial and error, as soon as I noticed the min-height was making the field taller, I knew I had the right value.

Once you have the min-height, the rows value becomes redundant.

---

<div class="post-metadata">

**Author:** ![djoz](https://avatars.discourse-cdn.com/v4/letter/d/ecc23a/32.png) [@djoz](https://community.weweb.io/u/djoz)\
**Post date:** [August 6, 2025, 12:03am UTC](https://community.weweb.io/t/best-way-to-dynamically-expand-a-text-form-input/8281/15 "2025-08-06T00:03:18Z")

</div>

i found that adding “resize: none;” to the CSS give the clean expandable text element without the manual resizing click-drag element at the bottom corner

```auto
field-sizing: content;
resize: none;

```

---

<div class="post-metadata">

**Author:** ![Antiokh](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/antiokh/32/2794_2.png) [@Antiokh](https://community.weweb.io/u/Antiokh)\
**Post date:** [October 1, 2025, 3:55pm UTC](https://community.weweb.io/t/best-way-to-dynamically-expand-a-text-form-input/8281/16 "2025-10-01T15:55:53Z")

</div>

@Matthew_S seems like I’ve found the source of your answer.

The problem is this css trich doesn’t work for Firefox and iOS. So my hack with textarea is still required for those platforms. Still, it doesn’t work in Long text component.

```auto
const target = document.activeElement;
if (target && target.tagName === ‘TEXTAREA’) {
target.style.height = ‘auto’;
target.style.height = target.scrollHeight + ‘px’;
}

```

Any chance we’ll have a setting for Long Text and Rich Text to enable-disable auto resize of the fields?

---

<div class="post-metadata">

**Author:** ![Matthew\_S](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/matthew_s/32/13342_2.png) [@Matthew\_S](https://community.weweb.io/u/Matthew_S)\
**Post date:** [October 7, 2025, 3:01pm UTC](https://community.weweb.io/t/best-way-to-dynamically-expand-a-text-form-input/8281/17 "2025-10-07T15:01:25Z")

</div>

If you still are in need of a solution, this is working for me:

```auto
const textarea = wwLib.getFrontDocument().getElementById("resize-me");

textarea.addEventListener("input", function () {
    // Reset the height so it can shrink when deleting text
    this.style.height = "auto";

    // Set the height based on content
    this.style.height = this.scrollHeight + "px";
});

// Optional: trigger once on page load in case it has pre-filled text
textarea.style.height = "auto";
textarea.style.height = textarea.scrollHeight + "px";

```

You just need to give the input a unique id, and then replace ‘resize-me’ in the code with your id.

If you then run this in a custom JS action on change of the input, it should work

---

<div class="post-metadata">

**Author:** ![Antiokh](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/antiokh/32/2794_2.png) [@Antiokh](https://community.weweb.io/u/Antiokh)\
**Post date:** [October 7, 2025, 4:38pm UTC](https://community.weweb.io/t/best-way-to-dynamically-expand-a-text-form-input/8281/18 "2025-10-07T16:38:58Z")

</div>

I’ll try, I’ve tried it before, activeElement is a more universal solution, but if it became broken, I’ll use yours. So actually I’ll need to check if that’s a Firefox or iOS. As for default development, I’d prefer to set this to “onKeyDown” event without tons of handlers of WeWeb. onChange is really complex.