Multiline form expanding height

Forms
1

Hi, new user, please be gentle

How can I set a web page multilink form box (plain text only) to expand if the text field overspills the default box size? The default setting gives about 2 lines of text in my form, so not helpful to see 500 words+ which it will need.

A (less desireable) alternative would be to the fix the multiline field box height to say 400px, can this be done?

Thanks for any help, appreciated.

2

Hello @CBS,

Welcome to Plumsail Community!

You can adjust the height of the Plain Text field input to the content using this code:

fd.spRendered(function() {
    //Replace FieldName with the internal name of the field
    var textArea = fd.field('FieldName').$refs.textarea;
    function recalcHeight() {
        textArea.style.height = (textArea.scrollHeight > textArea.clientHeight) ? (textArea.scrollHeight) + "px" : "120px";
    }
    recalcHeight();
    $(textArea).keyup(recalcHeight);
});
3

Hi mnikitina,

Thank you very much - I will give this a try!

4

@Margo Please help.
I checked that, it is not work now

5

Dear @itapps,
Just used it in SharePoint forms on a form, works just fine:
Designer_FH80VAZyZz

Can you attach some screenshots or a video of how it looks for you?

6

@Margo I just tried to use another fd.spRendered(function() {}), but not my own fd.Rendered(function() {}). Then it is ok. Thank you

7

Hi Margarita,
I have applied this logic for a number of fields. The multi line text box (rich text) auto expands in display mode, but is the default height in edit mode. I also tried to apply a listener so that it expands as the user inputs more information, but that doesn't work either. Can you help? This is my script:
many tahnks,
Peter

fd.spRendered(function() {
// List of internal field names
var fields = [
'Learning', 'People', 'Sustainability', 'Partnerships', 'Innovation', 'QDP', 'Induction',
'Registration', 'NonStarters', 'QOE', 'EandM', 'LearnerSupport', 'Attendance', 'Spotlight',
'LearningSupport', 'WP_WE', 'Enrichment', 'StudentVoice', 'PersonalTutor', 'StudentMentor',
'Behaviour', 'Progression', 'SmartTargets', 'Retention', 'PassRates', 'OutstandingResults'
];

// Apply the recalcHeight function to each field in the list
fields.forEach(function(fieldName) {
    var field = fd.field(fieldName);

    // Wait until the field is fully rendered in edit mode
    field.ready().then(function() {
        var textArea = field.$refs.textarea;

        if (textArea) {
            // Function to recalculate the height of the textarea
            function recalcHeight() {
                textArea.style.height = "auto"; // Reset the height to auto first to calculate correctly
                textArea.style.height = (textArea.scrollHeight > textArea.clientHeight) ? (textArea.scrollHeight) + "px" : "120px";
            }

            // Adjust the height when the user interacts with the field (input event)
            textArea.addEventListener('input', recalcHeight);

            // Adjust the height initially when the form loads
8

Hello @peter.harrison,

You can use this code to adjust the height of the rich text input to the content.

fd.spRendered(function() {    
    //Replace RichText with the internal name of the field
    fd.field('RichText').ready().then(function(field) {
        var editor = $(field.$el).find('.k-editor');        
        function recalcHeight() {
        	var actualHeight = Math.round(editor.height());
        	var conetntHeight = field.widget.document.body.scrollHeight;
        	var newHeight = (conetntHeight > actualHeight) ? conetntHeight + 100 : actualHeight;
            editor.height(newHeight);
            }
        recalcHeight();
        setInterval(function(){ recalcHeight(); }, 1000);
       
    });
});
9

That works perfectly. :wave:
Thank you!!!!