Best way to dynamically expand a text / form input?

[Mark_Pederson]

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:

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?

[Doc]

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.

[Dom]

Same, been trying to work this out for ages.

[se.belobrov]

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

[Mark_Pederson]

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

[se.belobrov]

In my case this code works

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

[archenia_jsanchez]

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.

[Mark_Pederson]

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 ??

[Alexis]

I think you can create a ticket on 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

[mark]

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

[tcc]

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

[dereckbolsanelo]

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

[dereckbolsanelo]

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.

Hope this is helpful.

[Dom]

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.