Press "Enter" to skip to content

K2 Smartforms: Rich Text Control with dynamic height

0

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.

image

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:

image

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

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

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.

image

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:

image

a) Apply a default minimum height to the control:

image

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

image

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

c) Clear the literal data label:

image

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

image

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

Empty Control

image

VS

Control with content

image

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:

<script>
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);
</script>

Leave a Reply

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

10 − eight =