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

Question

Question

autogrow multi-line field in collapsed section

Forms
Updated November 4, 2021
asked on March 8, 2018

The autogrow/autodjust code here is really slick!  https://answers.laserfiche.com/questions/86983/textbox-auto-expand-when-typing#119882

Problem is, if the field is in a section that is collapsed by default it appears has a thin line.  Any idea how to get fix that?  I have already tried using the enhanced code for hidden fields, and have tested that making the section expanded by default fixes it.

Thanks!

0 0

Answer

SELECTED ANSWER
replied on March 14, 2018

Thanks Rui, that took care of it!  Thanks for catching my mistake!  Here is the working code for anyone's future reference.

//Below code autoadjusts height of fields set with CSS Class=autoadjust
$(document).ready(function () {
 $('.autoadjust textarea').each(function () {
    h(this);
  }).on('lookup change keyup', function () {
    h(this);
  });
  function h(e) {
    $(e).css({'height':'auto','overflow-y':'hidden'}).height(e.scrollHeight);
  }
//Below allows autoadjust to work in a collapsed section with CSS class set to defaultCollapsed
$('.defaultCollapsed ul').each(function() {
  $(this).css('display','block');
});

 $('.autoadjust textarea').each(function () {
  h(this); 
});

 $('.defaultCollapsed ul').each(function() {
  $(this).css('display','none');
});
});

 

0 0

Replies

replied on March 8, 2018

Hi Alon,

When field is hidden because it is in a hidden section, there is no "hidden" class on the fields so that script would not work.

You should alter the display css on the section > ul element:

  $('.cf-section-block ul').each(function() {
    $(this).css('display','block');
  });
  
   $('.autogrow textarea').each(function () {
    h(this); 
  });

   $('.cf-section-block ul').each(function() {
    $(this).css('display','none');
  });

 

0 0
View 6 previous replies
replied on March 9, 2018 • Show version history

Thanks Rui,

When I used that code it hid the fields that are not in a section, and collapsed a section that was set to be expanded by default.

Here it is without the code:

And with the code:

Here is the code I am using:

//Below code autoadjusts height of fields set with CSS Class=autoadjust
$(document).ready(function () {
 $('.autoadjust textarea').each(function () {
    h(this);
  }).on('lookup change keyup', function () {
    h(this);
  });
  function h(e) {
    $(e).css({'height':'auto','overflow-y':'hidden'}).height(e.scrollHeight);
  }
//Below allows autoadjust to work in a collapsed section
$('.cf-section-block ul').each(function() {
  $(this).css('display','block');
});

 $('.autoadjust textarea').each(function () {
  h(this); 
});

 $('.cf-section-block ul').each(function() {
  $(this).css('display','none');

});
});

 

0 0
replied on March 11, 2018

Well I forgot about the default page. To distinguish default collapsed section from default expanded and default page, you can add custom CSS class like "defaultCollapsed" to default collapsed the section and update the script to:

$('.defaultCollapsed ul').each(function() {
  $(this).css('display','block');
});

 $('.autogrow textarea').each(function () {
  h(this); 
});

 $('.defaultCollapsed ul').each(function() {
  $(this).css('display','none');
});

 

0 0
replied on March 13, 2018

Rui,

I tried to follow your instructions but it is still not working.  With the below code the multi-line field in the collapsed section is a narrow line again.

//Below code autoadjusts height of fields set with CSS Class=autoadjust
$(document).ready(function () {
 $('.autoadjust textarea').each(function () {
    h(this);
  }).on('lookup change keyup', function () {
    h(this);
  });
  function h(e) {
    $(e).css({'height':'auto','overflow-y':'hidden'}).height(e.scrollHeight);
  }
//Below allows autoadjust to work in a collapsed section with CSS class set to defaultCollapsed
$('.defaultCollapsed ul').each(function() {
  $(this).css('display','block');
});

 $('.autogrow textarea').each(function () {
  h(this); 
});

 $('.defaultCollapsed ul').each(function() {
  $(this).css('display','none');
});
});

 

0 0
replied on March 13, 2018

I was using "autogrow" as class for the multi-line fields. If you were using "autoadjust", then you need to replace that in my code.

1 0
SELECTED ANSWER
replied on March 14, 2018

Thanks Rui, that took care of it!  Thanks for catching my mistake!  Here is the working code for anyone's future reference.

//Below code autoadjusts height of fields set with CSS Class=autoadjust
$(document).ready(function () {
 $('.autoadjust textarea').each(function () {
    h(this);
  }).on('lookup change keyup', function () {
    h(this);
  });
  function h(e) {
    $(e).css({'height':'auto','overflow-y':'hidden'}).height(e.scrollHeight);
  }
//Below allows autoadjust to work in a collapsed section with CSS class set to defaultCollapsed
$('.defaultCollapsed ul').each(function() {
  $(this).css('display','block');
});

 $('.autoadjust textarea').each(function () {
  h(this); 
});

 $('.defaultCollapsed ul').each(function() {
  $(this).css('display','none');
});
});

 

0 0
replied on July 19, 2018

Rui,

I just noticed an unintended side effect of the defaultCollapsed code.  It caused auto suggestions to not work.  Any chance you have a fix for that?

Thanks

0 0
replied on November 1, 2021

I'm using this code, but my field is hidden to begin with and I get the thin line when it unhides until I start typing in it.  How can I make it so the multi line field is never less than 1 row?

0 0
replied on November 1, 2021 • Show version history

Hi Katy-

I haven't used this in a while (meaning, not sure it works on the latest versions), but some old code I used had a min-height element in the CSS call:

 

$(e).css({'min-height':'22px','height':'auto','overflow-y':'hidden'}).height(e.scrollHeight);

 

1 0
replied on November 4, 2021

That did it!!  Thank you.

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

Sign in to reply to this post.

Details
Related Posts
Loading ...