Symptoms
We want to dynamically increase height of Text Area control as we enter text in it. Currently, we see scroll inserted as we reach height limit. We want to increase height dynamically of text area instead of scroll bar.
Diagnoses
K2 does not currently have the ability to do this, but it can be achieved with JavaScript.
Resolution
We will need to add some hidden data labels as well as expressions to the form in order to achieve this. Please see the directions below. Also this will do it for all Text Areas on the page, and should maybe be added to all When Text Area is Changed rules.
1: Create a Hidden and Literal data label.
2: Create an expression called Text Area Resizing the expression should be the following:
<script> $.each($('textarea'), function(index, element) {$(element).css("height",$(element).prop('scrollHeight'))}) </script>
However, we do not want this expression in the data label on initialize. We will transfer this expression into the data label, once the Text Area has changed.
3: Now create an unbound rule called Text Area Resize. We want an unbound rule so we can call it from other rules.
This rule will have 2 transfer data rules.
Rule _1- We need to clear the data label control. Simply check the box next to the Data Label. This will empty the field.
Rule _2 - Now we need to transfer the expression into the Data Label control. Simply drag the expression over to the Data Label.
4: Now we just need to call this unbound rule. I created a rule for when the Text Area is Changed. I call the Text Area Resize unbound rule in here. This should resize all Text Areas on the Form.
