Move and Resize Form Fields in ASP.NET Core PDF Viewer

14 Aug 20261 minute to read

  • Move: Drag the form field to reposition it.
  • Resize: Use the resize handles to change width and height.

Moving and Resizing a form field

Move and Resize Fields Programmatically (API)

You can set absolute bounds or move fields by a delta.

Set absolute bounds

<div class="text-center">
    <ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf">
    </ejs-pdfviewer>
</div>

<button id="resizeMove">Resize and Move FormFields</button>

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
  var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
  document.getElementById('resizeMove').addEventListener('click', function () {
    if (!pdfviewer || !pdfviewer.formDesignerModule) { console.warn('formDesignerModule not ready'); return; }
    var fields = pdfviewer.retrieveFormFields() || [];
    var field = fields.find(function (f) { return f.name === 'First Name'; }) || fields[0];
    if (field) {
      pdfviewer.formDesignerModule.updateFormField(field, {
        bounds: { X: 140, Y: 210, Width: 220, Height: 24 }
      });
    }
  });
});
</script>

See also