Expand Text Area based on number of Lines Loaded in....

  • 4 December 2018
  • 2 replies
  • 192 views

Userlevel 3
Badge +16

Hi,

 

For a Text area, i have users writing to it, saving it and then re-opening and adding more text to it.

 

Problem is, it's set to 6 lines in the Text Area properties

 

Upon initializing the form, i load any existing data into the Texta Area, but it will display 6 lines and then show scroll arrows to scroll across the hidden lines underneath. -causing problems when printing as not all text displayed (yes i know you can use a data label to display it all)

 

But because the Text area is WRITABLE, can i use javascript to expand the Text Area on initialize after the Load method adds the data to the Text area and then set the number of lines based on the lines in the text area loaded... Remember this is WRITABLE text area, so a DATA LABEL is no good.

 

Anyone like Mustafa able to help with this? He did a similar one with expanding as you type, but i need expanding as soon as it is loaded in... Possible?


2 replies

Badge +12

Hi Habby, 


 


I haven't worked with Javascript much myself but I have seen the following article posted below which may be of some help:


 


https://stackoverflow.com/questions/13085326/resize-text-area-to-fit-all-text-on-load-jquery


 


https://codepen.io/vsync/pen/czgrf


 


Kind regards, 


 


Percy

Userlevel 4
Badge +13

Good day SharpSharp


 


Based on the requirement here, I can see the ultimate goal would be for the text area control to auto adjust its size depending on the amount of content provided to the text area control. With some JavaScripting this is definitely possible however detecting if the scrollbar is active in order to resize the text area controls height would become quite a bit of code to use. I would rather recommend using one of the below JavaScripting snippets: 


 


Initiating the code:


1) Add the code to a expression


2) Ensure you have a litera enabled data label to which the code can be transfered and ensure the prevent xss is unchecked.


3) Using a transfer data rule transfer the expression to the data label.


Note: The transfer data rule can be used where needed, example on initialize, on control change, etc.


*I would however recommend that you either bind the expression directly to the data label so it will fire on initialize or alternatively call the above mentioned transfer data rule in the initialize rule.


 


Automated Solution:


This would use the "onkeyup" event to determine when the user releases a key (on the keyboard) which will adjust the height accordingly. 


Note: with some shanges to the if condition you could adjust the text area control number of rows instead however the above should work just fine.


document.getElementById("PLACE TEXTAREA CONTROL ID HERE EXAMPLE: 00000000-0000-0000-0000-000000000000_8642bdd6-67e2-bbb3-0b88-13404740dcaa_TextArea").onkeyup = function() {myFunction(this)};

function myFunction (sname) {
if (sname.scrollHeight > sname.clientHeight) {
sname.style.height = sname.scrollHeight + "px";
}
}

Semi-Automated Solution:


Using the below code snippet, you can alter the text areas amount of rows to the value desired.


Note: This will not autofit any number of content, it will just resize the control to the specified number of rows.


 


$('body').find('textarea').attr("rows", "PLACE ROW AMOUNT HERE EXMAPLE: 10");


 


Should you feel that this post is of use and or an accurate solution to the raised question, I kindly encourage you to mark it as such using the 'Mark as Solution', 'Kudo' andor ‘Me Too’ options.


 


Kind Regards


Raymond

Reply