Question

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

S
Userlevel 3
Badge +16

Hi,

Can anyone try this and possibly suggest code that does work?

In v5.4 I have a form with Text Area controls which adds a new line as a user types and the text area grows. It was done with a Data Label (set to literal) and with the expression:

<script>$("textarea").keyup(function(e) { while($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) { $(this).height($(this).height()+1); };});</script>

 

But since upgrading to K2 v5.7, as soon as user types one letter of text in the text area, the whole form hangs for another 10 seconds, then makes the text area 10000x tall and then lets you continue typing.

Is there a tweak that can done to the code so it works in v5.7 so that it grows as the user types (as it does in 5.4)

 

Thanks 

12 replies

Albarghouthy
Userlevel 5
Badge +16

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

S
Userlevel 3
Badge +16

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: 

Is there any of making the expression make the empty text areas show initially as 7 rows tall? I have the text area properties set to 7 rows, but the expression must be taking precedence over that row setting

 

Albarghouthy
Userlevel 5
Badge +16

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>

 

S
Userlevel 3
Badge +16

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>

 

 

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

 

Albarghouthy
Userlevel 5
Badge +16

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?

 

S
Userlevel 3
Badge +16

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

Albarghouthy
Userlevel 5
Badge +16

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>

 

S
Userlevel 3
Badge +16

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?

 

B
Badge +8

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

S
Userlevel 3
Badge +16

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. 

B
Badge +8

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

S
Userlevel 3
Badge +16

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

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings