Set fixed height on SharePoint Multiline Text

I want the text box to stay expanded on my form once a user enters content. The default behavior obscures the text, forcing the user to manually drag the box to reveal more text upon each edit.

Plumsail Forms SharePoint Online Version 1.4.6 (2019)

On the form itself, I have experimented with spacers, CSS, and setting the SharePoint column to have a large number of lines for edit. Nothing appears to achieve the desired results.

Hello @shedev,

That's a good question, thank you for asking. Let me research it a bit for you and see if there's any convenient option you can use.

To clarify - I would like the content to stay put, once text is entered. It is confusing when authors come back to edit their work and have to manually drag to view the full text.

@shedev,

Please use the following code to adjust the field height to the content height. Please replace {FieldInternalName} in the code below with your field’s internal name.

Note, that It works in Multiline Plain Text fields only.

fd.spRendered(function() {
var textArea = fd.field('{FieldInternalName}').$refs.textarea;
function recalcHeight() {
    textArea.style.height = (textArea.scrollHeight > textArea.clientHeight) ? (textArea.scrollHeight) + "px" : "120px";
}
recalcHeight();
$(textArea).keyup(recalcHeight);
});
3 Likes

Working :+1:
Thanks!

1 Like

@mnikitina how do you achieve the same effect with multiline rich text instead of Multiline Plain Text fields? Thank you

Hello @jyou,

Please see this post to know how to adjust the height of the rich text input to the content:

@mnikitina Can it set a maximum height also?

Hello @itapps,

You can set the height of the text area in the designer:
image

And if you don't want users to change the size of the text area, you can hide the resize property using the CSS:

textarea.form-control.fd-textarea {
   resize: none;
}