I have searched other threads and tried to add the JS for creating a bigger text box to encourage submitters to provide a detailed reply, but none seem to be working.
Currently I have the following:
fd.Rendered(function() {
//Replace FieldName with the internal name of the field
var textArea = fd.field('myfieldname').$refs.textarea;
function recalcHeight() {
textArea.style.height = (textArea.scrollHeight > textArea.clientHeight) ? (textArea.scrollHeight) + "px" : "120px";
}
recalcHeight();
$(textArea).keyup(recalcHeight);
});
Please can someone point me in the right direction?
Could you share more about your use case? Do you need the field to simply make the field taller, or do you need to adjust it depending on variables like input text or screen size?
If you don't need to update the height dynamically, the simplest solution would be to set it with CSS:
I tried testing that way, but it resulted in the space between questions rather than text box height. I don't want to apply to every text area of the form.
If these are simple Text fields, I'd suggest replacing them with Note fields. They work pretty much the same, but allow many lines of text. The CSS I provided only works with Note fields. Also, it should be adjusted like so:
I think I figured it out, but this doesn't achieve what I needed. It is making the text area larger but text starts mid-way down and input goes on one continuous line as before. I think a box that changes dynamically in size as the user puts in input is what I am looking for.
