Textarea auto expand

Wappler General Need Help
1

I have a text area field which I would like to display in a column. I can’t seem to get the scroll option to turn off so I can see the entire text. Is that possible? I would like to column to expand as necessary to accommodate the text.

Thanks,Rick

2

I don’t think there is a Wappler way of achieving this (as yet) :sunglasses:. Try adding the following JavaScript to your document:

  var autoExpand = function (field) {
  // Reset field height
  field.style.height = 'inherit';
  // Get the computed styles for the element
  var computed = window.getComputedStyle(field);
  // Calculate the height
  var height = parseInt(computed.getPropertyValue('border-top-width'), 10)
               + parseInt(computed.getPropertyValue('padding-top'), 10)
               + field.scrollHeight
               + parseInt(computed.getPropertyValue('padding-bottom'), 10)
               + parseInt(computed.getPropertyValue('border-bottom-width'), 10);

  field.style.height = height + 'px';
  };

  document.addEventListener('input', function (event) {
    if (event.target.tagName.toLowerCase() !== 'textarea') return;
    autoExpand(event.target);
  }, false);
3 Likes