Question

Dynamically grow Rich Text field based on user input

Forms

Updated October 18, 2021

asked on January 3, 2020 • Show version history

I use the below code to dynamically grow the Multi-Line fields on a form. This same code does not work for the Rich Text field. I would like to replace the Multi-Line fields with Rich Text fields. How can the Rich Text field grow in a similar manner?

//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');
});
});

1 0

Replies

replied on October 18, 2021

Hi Sean,

I know this is a very late reply but here is what you need:

//Below code autoadjusts height of fields set with CSS Class=autoadjust
$(document).ready(function () {
 $('.autoadjust .rich-text-editor').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 .rich-text-editor').each(function () {
  h(this); 
});

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

3 0

replied on January 5, 2020

You would want to use this for the Rich Text Editor:

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

$('.rich-text-editor').each(function () {
h(this);
});

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

1 0

replied on January 6, 2020

Hi Rose. Thank you for taking the time to respond. Your changes aren't quite what I am after. Ill try to explain. In the code I posted, the multi line box grows to show the additional text that is entered into the field. It doesn't show scroll bars. Your change moves the scrollbar outside of the rich text field. Id like the field to grow to see all the text entered into the field. Can that be done with this control?

0 0

replied on March 19, 2021

Were you ever able to find a way to auto-grow the rich textbox?

0 0

replied on April 20, 2021

How can I make this (when it is "collapsed") to be equivalent to one line? When I first open this field is so small it doesn't look like you can type anything in it until you tab to it, then it opens up.

0 0

You are not allowed to follow up in this post.

Question

Question

Dynamically grow Rich Text field based on user input

Replies

Sign in to reply to this post.