K2 5.7 - text area no longer grows as you type - Any suggestions?

Hey Sharpharp1,

long time no speak

here is a more efficient way to do it 

<script>
const style = document.createElement('style');
    style.innerHTML = `
      textarea {
        overflow: hidden;
        resize: none;
      }
    `;
    document.head.appendChild(style);

    const textareas = document.querySelectorAll('textarea');

    textareas.forEach(textarea => {
      textarea.addEventListener('input', autoGrow);
      autoGrow.call(textarea); 
    });

    function autoGrow() {
      this.style.height = 'auto'; 
      this.style.height = (this.scrollHeight) + 'px'; 
    }
	</script>

Mustafa

Hi Mustafa,

Long time no see, hope you doing well.

As always, you come through with the fix just like that, thank you!!!!

Code works great, the text area expands as you type, but just one thing, when the form loads, using your expression, the text boxes initially look like this: 

I am doing well thanks :) 

it works fine for me but try this should set 7 rows as initial value

<script>
 const style = document.createElement('style');
    style.innerHTML = `
      textarea {
        overflow: hidden;
        resize: none;
      }
    `;
    document.head.appendChild(style);

    const textareas = document.querySelectorAll('textarea');

    textareas.forEach(textarea => {
      textarea.rows = 7; 
      textarea.style.height = (textarea.scrollHeight) + 'px'; 
      textarea.addEventListener('input', autoGrow);
    });

    function autoGrow() {
      this.style.height = 'auto'; 
      this.style.height = (this.scrollHeight) + 'px'; 
    }
	</script>

<script>
 const style = document.createElement('style');
    style.innerHTML = `
      textarea {
        overflow: hidden;
        resize: none;
      }
    `;
    document.head.appendChild(style);

    const textareas = document.querySelectorAll('textarea');

    textareas.forEach(textarea => {
      textarea.rows = 7; 
      textarea.style.height = (textarea.scrollHeight) + 'px'; 
      textarea.addEventListener('input', autoGrow);
    });

    function autoGrow() {
      this.style.height = 'auto'; 
      this.style.height = (this.scrollHeight) + 'px'; 
    }
	</script>

Still doesn’t quite work unless the user starts typing and then it expands to 7 rows.

Ideally as before, I ‘d like it to show 7 empty rows in the text areas as soon as the form opens, rather than just the tiny single line as per the screen shot (before the user starts typing)

When you open just the view it works fine and shows 7 rows initially, but when part of a Form and you load the form, it only shows one line initially

Hello,

1- How is the expression configured?  is it set to a data label or do you transfer it in your rules? 

2- Could you check if you have any other script that could be overwriting the rows property or impacting the script provided above? 

3- is there any error in the browser console?

Hi,

It’s set as a Data Label - Literal and with expression set on it. -There is no transfer via rules

No other commands changing the rows property, this is set on properties of each text area.

Can’t see any errors showing...

Hello,

I'm not sure why it's not working on your end. Try this approach, it ensures that the textarea's height is always at least as tall as 7 rows, preventing it from shrinking below this height as the user types or deletes text.

<script>
const style = document.createElement('style');
    style.innerHTML = `
      textarea {
        overflow: hidden;
        resize: none;
      }
    `;
    document.head.appendChild(style);

    const textareas = document.querySelectorAll('textarea');

    textareas.forEach(textarea => {
      textarea.rows = 7; 
      const minHeight = textarea.scrollHeight;
      textarea.style.height = minHeight + 'px'; 
      textarea.addEventListener('input', function() {
        autoGrow.call(this, minHeight);
      });
    });

    function autoGrow(minHeight) {
      this.style.height = 'auto'; 
      this.style.height = Math.max(this.scrollHeight, minHeight) + 'px'; 
    }
	</script>

Unfortunately, same issue, works great in view only, but as part of form just get the one line.

Possible to set the row height BEFORE the user starts typing?

that sounds like an interesting concept
can someone please explain what is needed to set this up

text box control

data label - with script ; literal

how to target the textbox control?

cheers

Hi Braddo,

Add a text area and a Data Label to the canvas. Enable and make the Data Label visible with Literal ticked (make sure prevent XSS is unticked).

Go into the Data Label expression and create a new expression and copy/paste the code in there and save it.

The result should be a text area which expands as the user types. -This is useful for when saving the form as a PDF… previously it was case of having to transfer large pieces of text to a data label and then saving the PDF. 

This code didn’t quite work how i wanted when the View (containing the text areas) is part of a Form, as I just get one single line initially before it expands.

There is another way to possibly target the text area guid to make this work, but haven’t had a chance to test that yet. 

thanks for that

i’ve got heaps of forms that i generate pdf from

input controls on the page for user, and then hidden data labels that i load the data into before ‘pdfing’
such a pain

Yep, been there, done that. It would be good to have a tick box property for text area to expand. But at least we still have good old scripts like this to get the functionality we crave