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