Height of MultilineText SharePoint field

Forms SharePoint Online
1

Hello guys,

I have used a script from this topic:

And for about 90 multilineText fields I use this script to automatically make the height bigger when typing and "entering". But when I save New Item to the list and hit "Edit" - then I have this code:

for (let i = 1; i <= 36; i++) {
    ((i) => {
      // Define field names for the three different fields per question
      let fieldNames = [
        `question${i}`,
        `question${i}Detail`,
        `question${i}Summary`,
      ];

      // Loop through each field to apply the logic to all three fields
      fieldNames.forEach((fieldName) => {
        let fieldTextArea = fd.field(fieldName).$refs.textarea;

        if (fieldTextArea) {
          // Apply the transition to the textarea
          fieldTextArea.style.transition = "height 0.7s ease";
          fieldTextArea.style.overflow = "hidden";

          const recalcHeight = () => {
            if (fieldTextArea.scrollHeight > fieldTextArea.clientHeight) {
              fieldTextArea.style.height = fieldTextArea.scrollHeight + "px";
            } else {
              fieldTextArea.style.height = "75px";
            }
          };

          setTimeout(recalcHeight, 2000);
          $(fieldTextArea).keyup(recalcHeight);
        }
      });
    })(i);
  }
  1. Every column has title "question[i]" and other two, as you can see are titled the same way so I use this script for all of these "Multiline Text" fields.

When I use it on New Form, it works great due to keyUp and writing down the text. But when I load saved item, it waits 2 seconds, but it does not work correctly.
Most of the Multiline text fields are "hidden" in wizard in different steps. Is it possible that this causes the issue?

Unfortunately, I need the script to applied to every multiline text defined and get the field bigger even though I do not "see" them on screen.

My wizard has 5 steps.

Thank you
Stepan

2

SOLVED:

  const multilineFieldsHeightChange = () => {
    for (let i = 1; i <= 32; i++) {
      ((i) => {
        // Define field names for the three different fields per question
        let fieldNames = [
          `question${i}`,
          `question${i}Detail`,
          `question${i}Summary`,
        ];

        // Loop through each field to apply the logic to all three fields
        fieldNames.forEach((fieldName) => {
          let fieldTextArea = fd.field(fieldName).$refs.textarea;

          if (fieldTextArea) {
            // Apply the transition to the textarea
            fieldTextArea.style.transition = "height 0.7s ease";
            fieldTextArea.style.overflow = "hidden";

            const recalcHeight = () => {
              if (fieldTextArea.scrollHeight > fieldTextArea.clientHeight) {
                fieldTextArea.style.height = fieldTextArea.scrollHeight + "px";
              } else {
                fieldTextArea.style.height = "75px";
              }
            };

            setTimeout(recalcHeight, 500);
            $(fieldTextArea).keyup(recalcHeight);
          }
        });
      })(i);
    }
  };

  fd.container("Wizard").widget.$on("on-change", () => {
    multilineFieldsHeightChange();
  });
  1. Wrapped the "for" in function
  2. When the step is changed in Wizard, call the function which will recalculate the height

Hope it will help someone :slight_smile:
Stepan

1 Like