How Do I Resize a Multiline Text Form Field in Height When It’s Overflown?

To resize a multiline text form field in height when it’s overflown, use the following code snippet, which will make multiline text widgets auto-grow in height when overflown:

  async function (event) {
    if ( === "TEXTAREA") {
      const textInput =;
      const id = textInput.parentNode.dataset.annotationId;
      const pageIndex = instance.viewState.currentPageIndex;
      const annotations = await instance.getAnnotations(pageIndex);
      const widget = annotations.find(
        (annotation) => === id
      if (
        widget &&
        typeof widget.fontSize === "number" &&
        textInput.scrollHeight > textInput.clientHeight
      ) {
        while (textInput.scrollHeight > textInput.clientHeight) {
          await instance.update(
                widget.boundingBox.height + widget.fontSize
          // This is needed so the widget height change is propagated to the DOM
          // before the next check. Otherwise there may be an endless loop.
          await new Promise(requestAnimationFrame);

This requires the Form Creator component. The snippet above can also be adapted to your needs to resize other form fields.

It’s important to note that the code above:

  • Only works for text widgets with a fixed number fontSize value (not “auto”).

  • Only works for text widgets with a doNotScroll value of false.

  • Won’t change the layout of any other widgets, which will likely either overlap the text widget or be covered by it (you can add this logic yourself if necessary).

  • Won’t prevent the widget from growing down the bottom bound of the page (you can add this logic yourself if necessary).

Tested in PSPDFKit for Web 2021.3.0.