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:
instance.contentDocument.addEventListener( "input", async function (event) { if (event.target.nodeName === "TEXTAREA") { const textInput = event.target; const id = textInput.parentNode.dataset.annotationId; const pageIndex = instance.viewState.currentPageIndex; const annotations = await instance.getAnnotations(pageIndex); const widget = annotations.find( (annotation) => annotation.id === id ); if ( widget && typeof widget.fontSize === "number" && textInput.scrollHeight > textInput.clientHeight ) { while (textInput.scrollHeight > textInput.clientHeight) { await instance.update( widget.set( "boundingBox", widget.boundingBox.set( "height", 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 offalse
. -
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.