Reduce default size of rich text multiline fields

Forms SharePoint Online
1

Hello,
I am setting up a form with about 60 fields. In order to reduce the percieved length of the form, I want to decrease the height of the rich text fields.

I have already tried this post https://community.plumsail.com/t/display-vs-edit-field-sizes/9086, this post https://community.plumsail.com/t/adjusting-multiline-text-field/13576, this post https://community.plumsail.com/t/multiple-field-height-auto/10253 and some others.
I have also tried changing the height in the fields control. But nothing has worked so far.

How can I decrease the default height of my rich text fields?

2

Hey @Lea,

You can use this line to change the height of an individual field:

fd.field('InternalName').$refs.textarea.style.height = "30px";

I'd recommend doing it in a cycle similar to this example (the code assumes that you have your text fields named by default "Note1", "Note2", "Note3", and so on):

for (let i = 1; i <= numberOfRichTextFields; i++) {
    fd.field('Note' + i).$refs.textarea.style.height = "30px";
}
3

Thank you, for your reply!
That only works, if I don't put it inside an fd.spRendered. But then the Form doesn't render correctly. The Ticket Title and the Ticket Comments aren't being displayed anymore.
Is there anything I can do to have both a completely rendered form and a reduced size?

4

Hi @Lea ,

The Form must be rendered for manipulating with the controls and fields.
It must work when the script is wrapped in:

fd.spRendered(() => {
  fd.field("InternalName").$refs.textarea.style.height = "30px";
});

as @IliaLazarevskii mentioned.

And when some parts does not render correctly, try to do a function like this:

fd.spRendered(() => {
  const resizeMultipleLineTextField = (array) => {
    for (let i = 0; i < array.length; i++) {
      fd.field(array[i]).$refs.textarea.style.height = "30px";
    }
  };
  // Internal Names of Multiple Lines Of Text (Plain)
  resizeMultipleLineTextField(["Note1", "Note2"]);
});

And try to call it at the bottom of your script file.
The reason why it does not work correctly is, that you have this field as "Rich text" and not as "Plain Text". Probably :slight_smile:

Regards
Stepan

2 Likes
5

Hey @Lea,

I wanted to add that a sure way to do this is to add this to the CSS file of your form:

.note .k-content {
    height: 50px !important;
}

Then put 'note' in the Class property of each field you want shrunken.
This has to be done manually, so I'd recommend trying @StepanS's approach first.

1 Like