Hi guys,
I've added a form that has a textarea and I would like it to resize depending on how many rows of text are typed. For this I added the following JS:
// Applied globally on all textareas with the "autoExpand" class
(function($) {
$(document)
.one('focus.autoExpand', 'textarea.autoExpand', function(){
var savedValue = this.value;
this.value = '';
this.baseScrollHeight = this.scrollHeight;
this.value = savedValue;
})
.on('input.autoExpand', 'textarea.autoExpand', function(){
var minRows = this.getAttribute('data-min-rows')|0, rows;
this.rows = minRows;
rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
this.rows = minRows + rows;
})
})(jQuery);
It works on a <textarea class='autoExpand'> tag, but not on the generic cred field. I think it's because the rows attribute is hardcoded in there (it's always 5 even though I add 'rows="5"').
You can see a working example here: hidden link. For now I'm just using some CSS to set the height, but I would like to see it auto-resizing.
Do you know a way to make it work?
Rens
Hi, unfortunately this type of customization of Forms fields falls outside the scope of support we provide here in the forums. There is no JavaScript API for forms, so I don't have much I can offer here. You might try attaching your event listeners to a different element, as Forms may prevent events from bubbling up that far. Beyond that, you're on your own here for customization outside of the scope of support.
My issue is resolved now. Thank you!
