Text paragraph # of lines before auto-expand

API & Custom Code Show & Tell
1

Hi guys,

I share this useful code for me to be able to control the size of a Paragraf field when empty. It saves a lot of space in a form.

  /* Text paragraph minimum lines before auto-expand */
$(document).on('knack-scene-render.any', function () {
  const initialLines = 2, lineHeight = 1.5;
  const baseHeight = (initialLines * lineHeight) + 'em';
  $('textarea').each(function () {
    $(this).css({
      height: baseHeight,
      'min-height': baseHeight,
      resize: 'none',
      'overflow-y': 'hidden'
    });
    if (this.scrollHeight > this.clientHeight) {
      this.style.height = 'auto';
      this.style.height = this.scrollHeight + 'px';
    }
    $(this).on('input', function () {
      this.style.height = 'auto';
      this.style.height = Math.max(this.scrollHeight, parseFloat(baseHeight)) + 'px';
    });
  });
});

cheers,
Michael

1 Like