Press "Enter" to skip to content

K2 Smartforms: Rich Text Control with dynamic height


imageThe customer approached me with the following requirement:

“Rich Text control should change height dynamically and adjust to the content so that there is no vertical scrollbar.”

Below you will see how this can be achieved with the help of Smartform rules, data labels and 3 lines of javascript.

1. Add Rich Text control and 2 Data Labels onto your form/view.


The name of my Rich Text control is rtxtDynamicHeight. This will be important when writing the script.

The data labels names are:

  • dlblScript – will be used to run the javascript with the help of K2 SmartForms rules. The control must be Literal and Invisible.
  • dlblNewHeightValue – will be used to monitor the change of the Rich Text content height and trigger certain rules. The control must be literal.

2. Create 2 expressions with the definitions below.

a) Expression to check the real height of the Rich Text content upon its change:


The final code, which will be triggered on the form:

     var rtxt = $(‘div[Name=”rtxtDynamicHeight”]’);
     var height = $(rtxt).find(‘[id*=”contentDiv”]’)[0].scrollHeight;
     $(‘span[Name=”dlblNewHeightValue”]’).SFCLabel(‘option’,’text’, height);

b) Expression to check if the changed content height is more than a default one.

We need to think about a default height of the control, which will be a minimum-height. Otherwise it can happen, that the control will be completely collapsed if you set its height less than 50px. I will use 250px as a default minimum height and will check if the new height more than this value.


As you have noticed, I am increasing the new height value by 70px just to add the height of the toolbar and the footer of the control.

The increasing number may vary depending on the theme you are using and depending whether you show the toolbar and/or the footer in the control.

3. Calculate the new height when the control is changed.

For this you need to create a simple rule with the following actions:


a) Apply a default minimum height to the control:


b) Set the literal data label value with a script expression.


With this action you will run the script on form when you need it.

c) Clear the literal data label:


You need to clear the literal data label so that you can run the script again afterwards.

4. Set the height of the Control when the dlblNewHeightValue data label is changed


5. Run the form/view and try it yourself:

Empty Control



Control with content


If you have multiple instances of the control on different views within 1 form, then you will have to extend the script, restricting the area of where you will search for the rich text control and the data labels:

var view = $(‘div[Name=”ViewInstanceName”]’);
var rtxt = $(view).find(‘div[Name=”rtxtDynamicHeight”]’);
var height = $(rtxt).find(‘[id*=”contentDiv”]’)[0].scrollHeight;
$(view).find(‘span[Name=”dlblNewHeightValue”]’).SFCLabel(‘option’,’text’, height);

  1. Kavi Kavi

    Hi Konstantin,

    K2 Five, can we stop the horizontal scrolling on the Rich Text Box, the control width is !00%.


    • Konstantin Fukszon Konstantin Fukszon

      Hi Kavi,

      Not sure, what you mean here. if you want to stop the horizontal scrolling, you need to play with the properties of the Rich Text Box control itself. There are some which enable or disable those.
      Otherwise, please, attach some screenshots to explain the request in a better way.


Leave a Reply

Your email address will not be published. Required fields are marked *

one × five =