You are viewing limited content. For full access, please sign in.

Question

Question

Javascript for auto adjusting height of readonly textareas with pagination / tabbed form

asked on September 6, 2018

The below Javascript is being used for auto adjusting the height of multi- line fields. It works for all pages in a paginated form that uses a drop-down menu for navigation.  

However, in a second, read-only copy of the form, the script is only being applied to the first "page" of the form. All other fields on subsequent pages with the class "autogrow" are not applying the script.  

Is there something in the script I need to adjust for this second, read only copy to get it to apply to all pages in the form?

Any help appreciated! Thanks in advance.
 

$(document).ready(function () {
  
  $('.autogrow 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);
  }

});

 

0 0

Answer

SELECTED ANSWER
replied on September 6, 2018

Certain CSS box model properties like scrollHeight don't get calculated by the browser when the element is not being displayed (so scrollHeight=0 for those elements). The code likely works on the initial submission because you are constantly re-adjusting the size whenever the change event handler is running. With the read-only version, the change events never happen, so anything on the first page gets updated with the page load, and everything that's hidden doesn't get calculated correctly. You could try to write an event handler that catches when the page is changed (so a click on the next/prev buttons, or a click on the navigation bar tabs) and re-run your each() function loop over all the text areas.

4 0

Replies

You are not allowed to reply in this post.
You are not allowed to follow up in this post.

Sign in to reply to this post.