Autoadjust height of row depending on text in multi line field

asked on November 10, 2019 • Show version history

Hello,

I would like to adjust the height of the rows in my table depending of the content of a multi line field. The idea is to not have to scroll down in the cell to read all the text in this field.

I tried to use the below Javascript found on this forum with assigning the CSS class autoadjust to my field but it does not work:

$(document).ready(function () {

$('.autoadjust textarea').each(function () {
h(this);
}).on('keydown blur change',function () {
h(this);
});

function h(e) {
$(e).css({'height':'auto','overflow-y':'hidden'}).height(e.scrollHeight);
}

});

Data in the table are populated from a lookup view and should be read only for this form.

Is there a special way to target the field as it is in a table?

Thanks in advance for any help !

Veronique

0 0

replied on November 20, 2019

Working with Tables and Collections requires some adjustment to the javascript code to ensure that it applies to items that start out on the canvas as well as items that are added as a result of clicking the add button for table rows or a collection items.

The following code block will autoGrow any multi-line textareas on a form that have the class autoGrow applied to them:

$( document ).ready(function() {
  /* call autoGrowML function on existing fields on canvas */
  autoGrowML();
  
  /* ensure that autoGrowML function is applied to any textAreas that appear as a result of a new table row or new colletion item */
  $('.cf-table-add-row, .cf-collection-append').on('click', function() {
    autoGrowML();
  });
  
}); 

function autoGrowML() {
  /* Iterate through each textarea with autoGrow class and call function to expand/contract with amount of text entered */
  $('.autoGrow textarea').each(function () {
    h(this);
  }).on('lookup change keyup', function () {
    h(this);
  });
}

function h(e) {
  /* Function that actually performs the expansion/contraction of specified fields */
  $(e).css({'height':'auto','overflow-y':'hidden','min-height':'26px'}).height(e.scrollHeight);
}

0 0

Question

Question

Autoadjust height of row depending on text in multi line field

Replies

Sign in to reply to this post.