--- title: "Keep PDF widget dimensions consistent | Nutrient" canonical_url: "https://www.nutrient.io/guides/web/knowledge-base/consistent-widget-annotation-dimensions/" md_url: "https://www.nutrient.io/guides/web/knowledge-base/consistent-widget-annotation-dimensions.md" last_updated: "2026-05-18T14:28:53.388Z" description: "Learn how to ensure widget annotations maintain consistent dimensions across devices and screen sizes when using custom renderers in Nutrient Web SDK." --- # Keep widget annotation dimensions consistent across devices When using custom renderers for widget annotations, their size and position may appear correct on desktop but become incorrect — shrinking, stretching, or overlapping — when viewed on mobile or smaller screens. This happens because the HTML elements don’t automatically adjust as the screen or zoom changes. Common symptoms include: - Widget annotations shift or overlap in mobile or responsive views. - The `noZoom` flag has no effect in zoomed-out or responsive modes. - Form fields appear distorted when switching between devices. > While this guide focuses on widget annotations (form fields), the same issue can occur with any annotation type using custom renderers. The solution applies to all custom-rendered annotations. ## Root cause When using custom renderers for widget annotations in Nutrient Web SDK, the rendered HTML elements don’t automatically adjust their width and height in response to viewport or zoom changes. The Web SDK manages size and position for built-in annotations, but custom renderers must actively handle scaling and resizing for responsive UIs. This leads to inconsistent display of form fields on different screen sizes or when zooming. ## Solution Implement dynamic width and height for HTML elements in your custom renderers. Set `display: block` on your custom annotation elements because input elements have `display: inline-block` by default, which can prevent percentage-based width and height from working correctly in the annotation container. The following example demonstrates how to create a custom renderer with dynamic sizing that responds to zoom changes: ```js let globalInstance = null; NutrientViewer.load({...baseOptions, theme: NutrientViewer.Theme.DARK, customRenderers: { Annotation: ({ annotation }) => { // Only apply custom rendering to widget annotations. if (annotation instanceof NutrientViewer.Annotations.WidgetAnnotation) { const node = document.createElement("input"); node.style.display = "block"; // Set initial dimensions. // The custom renderer receives the annotation in page coordinates, // which are already scaled by zoom, so we use the dimensions directly. node.style.width = "100%"; node.style.height = "100%"; return { node, append: true }; } // Use default rendering for other annotation types. return null; }, }, }).then((instance) => { globalInstance = instance; // Listen for zoom changes and trigger rerendering. instance.addEventListener("viewState.zoom.change", () => { instance.setViewState(instance.viewState); }); }); ``` Ensure you recalculate width and height when the viewport, page size, or zoom changes. For a working demo and reference code, refer to the [custom renderer — dynamic input fields playground](https://www.nutrient.io/demo/sandbox?p=eyJ2IjoxLCJzZXR0aW5ncyI6eyJmaWxlTmFtZSI6ImZvcm0ucGRmIn0sImpzIjoibGV0IGdsb2JhbEluc3RhbmNlID0gbnVsbDtcbk51dHJpZW50Vmlld2VyLmxvYWQoe1xuICAuLi5iYXNlT3B0aW9ucyxcbiAgdGhlbWU6IE51dHJpZW50Vmlld2VyLlRoZW1lLkRBUkssXG4gIGN1c3RvbVJlbmRlcmVyczoge1xuICAgIEFubm90YXRpb246ICh7IGFubm90YXRpb24gfSkgPT4ge1xuICAgICAgLy8gT25seSBhcHBseSBjdXN0b20gcmVuZGVyaW5nIHRvIHdpZGdldCBhbm5vdGF0aW9ucy5cbiAgICAgIGlmIChhbm5vdGF0aW9uIGluc3RhbmNlb2YgTnV0cmllbnRWaWV3ZXIuQW5ub3RhdGlvbnMuV2lkZ2V0QW5ub3RhdGlvbikge1xuICAgICAgICBjb25zdCBub2RlID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudChcImlucHV0XCIpO1xuICAgICAgICBub2RlLnN0eWxlLmRpc3BsYXkgPSBcImJsb2NrXCI7XG5cbiAgICAgICAgLy8gU2V0IGluaXRpYWwgZGltZW5zaW9ucy5cbiAgICAgICAgLy8gVGhlIGN1c3RvbSByZW5kZXJlciByZWNlaXZlcyB0aGUgYW5ub3RhdGlvbiBpbiBwYWdlIGNvb3JkaW5hdGVzLFxuICAgICAgICAvLyB3aGljaCBhcmUgYWxyZWFkeSBzY2FsZWQgYnkgem9vbSwgc28gd2UgdXNlIHRoZSBkaW1lbnNpb25zIGRpcmVjdGx5LlxuICAgICAgICBub2RlLnN0eWxlLndpZHRoID0gXCIxMDAlXCI7XG4gICAgICAgIG5vZGUuc3R5bGUuaGVpZ2h0ID0gXCIxMDAlXCI7XG5cbiAgICAgICAgcmV0dXJuIHsgbm9kZSwgYXBwZW5kOiB0cnVlIH07XG4gICAgICB9XG5cbiAgICAgIC8vIFVzZSBkZWZhdWx0IHJlbmRlcmluZyBmb3Igb3RoZXIgYW5ub3RhdGlvbiB0eXBlcy5cbiAgICAgIHJldHVybiBudWxsO1xuICAgIH1cbiAgfVxufSkudGhlbigoaW5zdGFuY2UpID0%2BIHtcbiAgZ2xvYmFsSW5zdGFuY2UgPSBpbnN0YW5jZTtcblxuICAvLyBMaXN0ZW4gZm9yIHpvb20gY2hhbmdlcyBhbmQgdHJpZ2dlciByZS1yZW5kZXIuXG4gIGluc3RhbmNlLmFkZEV2ZW50TGlzdGVuZXIoXCJ2aWV3U3RhdGUuem9vbS5jaGFuZ2VcIiwgKCkgPT4ge1xuICAgIGluc3RhbmNlLnNldFZpZXdTdGF0ZShpbnN0YW5jZS52aWV3U3RhdGUpO1xuICB9KTtcbn0pOyIsImNzcyI6Ii8qIEFkZCB5b3VyIENTUyBoZXJlICovXG4iLCJtb2RlIjoic3RhbmRhbG9uZSJ9). ## Additional considerations When implementing dynamic sizing for widget annotations, keep the following in mind: - If the issue persists after adding dynamic sizing, ensure you’re not using any direct DOM injection or unsupported overlay patterns. - Check that your code for handling form field rendering is triggered after every zoom or resize event. - If exporting annotated PDFs for debugging, use the download or export feature in the [playground](https://www.nutrient.io/demo/sandbox?p=eyJ2IjoxLCJzZXR0aW5ncyI6eyJmaWxlTmFtZSI6ImZvcm0ucGRmIn0sImpzIjoibGV0IGdsb2JhbEluc3RhbmNlID0gbnVsbDtcbk51dHJpZW50Vmlld2VyLmxvYWQoe1xuICAuLi5iYXNlT3B0aW9ucyxcbiAgdGhlbWU6IE51dHJpZW50Vmlld2VyLlRoZW1lLkRBUkssXG4gIGN1c3RvbVJlbmRlcmVyczoge1xuICAgIEFubm90YXRpb246ICh7IGFubm90YXRpb24gfSkgPT4ge1xuICAgICAgLy8gT25seSBhcHBseSBjdXN0b20gcmVuZGVyaW5nIHRvIHdpZGdldCBhbm5vdGF0aW9ucy5cbiAgICAgIGlmIChhbm5vdGF0aW9uIGluc3RhbmNlb2YgTnV0cmllbnRWaWV3ZXIuQW5ub3RhdGlvbnMuV2lkZ2V0QW5ub3RhdGlvbikge1xuICAgICAgICBjb25zdCBub2RlID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudChcImlucHV0XCIpO1xuICAgICAgICBub2RlLnN0eWxlLmRpc3BsYXkgPSBcImJsb2NrXCI7XG5cbiAgICAgICAgLy8gU2V0IGluaXRpYWwgZGltZW5zaW9ucy5cbiAgICAgICAgLy8gVGhlIGN1c3RvbSByZW5kZXJlciByZWNlaXZlcyB0aGUgYW5ub3RhdGlvbiBpbiBwYWdlIGNvb3JkaW5hdGVzLFxuICAgICAgICAvLyB3aGljaCBhcmUgYWxyZWFkeSBzY2FsZWQgYnkgem9vbSwgc28gd2UgdXNlIHRoZSBkaW1lbnNpb25zIGRpcmVjdGx5LlxuICAgICAgICBub2RlLnN0eWxlLndpZHRoID0gXCIxMDAlXCI7XG4gICAgICAgIG5vZGUuc3R5bGUuaGVpZ2h0ID0gXCIxMDAlXCI7XG5cbiAgICAgICAgcmV0dXJuIHsgbm9kZSwgYXBwZW5kOiB0cnVlIH07XG4gICAgICB9XG5cbiAgICAgIC8vIFVzZSBkZWZhdWx0IHJlbmRlcmluZyBmb3Igb3RoZXIgYW5ub3RhdGlvbiB0eXBlcy5cbiAgICAgIHJldHVybiBudWxsO1xuICAgIH1cbiAgfVxufSkudGhlbigoaW5zdGFuY2UpID0%2BIHtcbiAgZ2xvYmFsSW5zdGFuY2UgPSBpbnN0YW5jZTtcblxuICAvLyBMaXN0ZW4gZm9yIHpvb20gY2hhbmdlcyBhbmQgdHJpZ2dlciByZS1yZW5kZXIuXG4gIGluc3RhbmNlLmFkZEV2ZW50TGlzdGVuZXIoXCJ2aWV3U3RhdGUuem9vbS5jaGFuZ2VcIiwgKCkgPT4ge1xuICAgIGluc3RhbmNlLnNldFZpZXdTdGF0ZShpbnN0YW5jZS52aWV3U3RhdGUpO1xuICB9KTtcbn0pOyIsImNzcyI6Ii8qIEFkZCB5b3VyIENTUyBoZXJlICovXG4iLCJtb2RlIjoic3RhbmRhbG9uZSJ9) to ensure you’re retaining widget annotation data. - If the annotation content is rasterized (converted to images), size shifting won’t be visible but is still a concern for live widgets. - Default toolbar configuration typically works. Discrepancies appear mainly with custom renderer logic. - Always test changes in both desktop and mobile or responsive modes — manually or using browser developer tools. For more information on custom renderers, refer to the [annotation customization](https://www.nutrient.io/guides/web/annotations/custom-rendered-annotations.md) guide. --- ## Related pages - [Add Custom Keyboard Shortcuts](/guides/web/knowledge-base/add-custom-keyboard-shortcuts.md) - [How to add a custom toolbar item to display current zoom percentage](/guides/web/knowledge-base/add-custom-zoom-perentage.md) - [Add Listener Text Note Annotation](/guides/web/knowledge-base/add-listener-text-note-annotation.md) - [Add Listener Toolbar Item](/guides/web/knowledge-base/add-listener-toolbar-item.md) - [Add Signature Initials](/guides/web/knowledge-base/add-signature-initials.md) - [Listen to an annotation’s hover event](/guides/web/knowledge-base/annotations-hover-event.md) - [Blurry Print Resolution](/guides/web/knowledge-base/blurry-print-resolution.md) - [Automatic Annotation Field Tab Ordering](/guides/web/knowledge-base/automatic-annotation-field-tab-ordering.md) - [Change Default Line Width Ink Annotations](/guides/web/knowledge-base/change-default-line-width-ink-annotations.md) - [Check Document Contains Annotations](/guides/web/knowledge-base/check-document-contains-annotations.md) - [Customize Page Indicator](/guides/web/knowledge-base/customize-page-indicator.md) - [Check Password Protected Files](/guides/web/knowledge-base/check-password-protected-files.md) - [Control Appearance Of Delete Button On Ink Annotations](/guides/web/knowledge-base/control-appearance-of-delete-button-on-ink-annotations.md) - [Create Highlight Annotations From Text Extraction Technology](/guides/web/knowledge-base/create-highlight-annotations-from-text-extraction-technology.md) - [Default To Cloudy Border](/guides/web/knowledge-base/default-to-cloudy-border.md) - [Delete All Annotations](/guides/web/knowledge-base/delete-all-annotations.md) - [Deselect Text](/guides/web/knowledge-base/deselect-text.md) - [Detect Pspdfkit Ui Loaded](/guides/web/knowledge-base/detect-pspdfkit-ui-loaded.md) - [Determine Current Layout Mode](/guides/web/knowledge-base/determine-current-layout-mode.md) - [Disable Context Menu](/guides/web/knowledge-base/disable-context-menu.md) - [How to disable text annotation movement in web apps](/guides/web/knowledge-base/disable-text-annotation-movement.md) - [Download Exported Document](/guides/web/knowledge-base/download-exported-document.md) - [Disable Resize Of Annotations](/guides/web/knowledge-base/disable-resize-of-annotations.md) - [Export Ink Annotation Image](/guides/web/knowledge-base/export-ink-annotation-image.md) - [Find Ink Annotation For Signature Form Field](/guides/web/knowledge-base/find-ink-annotation-for-signature-form-field.md) - [Focus Viewer After Loading](/guides/web/knowledge-base/focus-viewer-after-loading.md) - [Focus the delete button in a confirm dialog](/guides/web/knowledge-base/focus-delete-button-in-confirm-modal-component.md) - [Extracting text and cursor position in annotations](/guides/web/knowledge-base/extract-annotation-text-and-retrieve-cursor-position.md) - [Focus Widget Annotation](/guides/web/knowledge-base/focus-widget-annotation.md) - [Get Entered Document Password](/guides/web/knowledge-base/get-entered-document-password.md) - [Fix errors with unsupported form field actions](/guides/web/knowledge-base/handle-unsupported-form-field-actions.md) - [Get Visible Annotations](/guides/web/knowledge-base/get-visible-annotations.md) - [Handling Clicks On Custom Overlays](/guides/web/knowledge-base/handling-clicks-on-custom-overlays.md) - [Highlight required form fields](/guides/web/knowledge-base/highlight-required-fields.md) - [How Do I Limit The Number Of Annotations](/guides/web/knowledge-base/how-do-i-limit-the-number-of-annotations.md) - [How Do I Disable Scrolling On Page Edges](/guides/web/knowledge-base/how-do-i-disable-scrolling-on-page-edges.md) - [How Do I Prevent Printing Annotations](/guides/web/knowledge-base/how-do-i-prevent-printing-annotations.md) - [Resize multiline text fields to avoid overflow](/guides/web/knowledge-base/how-do-i-resize-form-fields.md) - [How Do I Toggle The Theme](/guides/web/knowledge-base/how-do-i-toggle-the-theme.md) - [How Do I Rotate A Page](/guides/web/knowledge-base/how-do-i-rotate-a-page.md) - [How Do I Zoom To A Specific Value](/guides/web/knowledge-base/how-do-i-zoom-to-a-specific-value.md) - [How To Create Bookmarks From Outline Elements](/guides/web/knowledge-base/how-to-create-bookmarks-from-outline-elements.md) - [Image Attachments Lost Stamp Annotation Templates](/guides/web/knowledge-base/image-attachments-lost-stamp-annotation-templates.md) - [License Registered Different Bundle Id](/guides/web/knowledge-base/license-registered-different-bundle-id.md) - [Iterate over form fields and widgets](/guides/web/knowledge-base/iterate-over-form-fields.md) - [Load Pdf As Arraybuffer](/guides/web/knowledge-base/load-pdf-as-arraybuffer.md) - [Link Text](/guides/web/knowledge-base/link-text.md) - [Load Pdf From Stream](/guides/web/knowledge-base/load-pdf-from-stream.md) - [Loading Multiple Files](/guides/web/knowledge-base/loading-multiple-files.md) - [Nutrient Size Optimization](/guides/web/knowledge-base/nutrient-size-optimization.md) - [Load Pdf Stub From String](/guides/web/knowledge-base/load-pdf-stub-from-string.md) - [Disabling automatic synchronization in Nutrient Web SDK](/guides/web/knowledge-base/manual-instant-sync.md) - [Observe Document Editor Visibility](/guides/web/knowledge-base/observe-document-editor-visibility.md) - [Override Ink Signature Dialog](/guides/web/knowledge-base/override-ink-signature-dialog.md) - [Override User Agent](/guides/web/knowledge-base/override-user-agent.md) - [Persist Currently Edited Note Test](/guides/web/knowledge-base/persist-currently-edited-note-test.md) - [Overview](/guides/web/knowledge-base/overview.md) - [Prevent Shortcut Printing](/guides/web/knowledge-base/prevent-shortcut-printing.md) - [Persist Ink Signatures Across Instances](/guides/web/knowledge-base/persist-ink-signatures-across-instances.md) - [Place Annotation At Visible Center](/guides/web/knowledge-base/place-annotation-at-visible-center.md) - [Prevent Editing Content Text Annotation](/guides/web/knowledge-base/prevent-editing-content-text-annotation.md) - [Process Currently Rendered Pages](/guides/web/knowledge-base/process-currently-rendered-pages.md) - [Programmatically Navigate To Page](/guides/web/knowledge-base/programmatically-navigate-to-page.md) - [Render Document Full Height](/guides/web/knowledge-base/render-document-full-height.md) - [Programmatic Comment Annotations](/guides/web/knowledge-base/programmatic-comment-annotations.md) - [Read-only forms](/guides/web/knowledge-base/read-only-forms.md) - [Render Night Mode](/guides/web/knowledge-base/render-night-mode.md) - [Render Page Black White](/guides/web/knowledge-base/render-page-black-white.md) - [Render Visible Area In Current Page](/guides/web/knowledge-base/render-visible-area-in-current-page.md) - [Render Page Without Annotations](/guides/web/knowledge-base/render-page-without-annotations.md) - [Render Watermark When Printing](/guides/web/knowledge-base/render-watermark-when-printing.md) - [Restore Last Seen Page](/guides/web/knowledge-base/restore-last-seen-page.md) - [Save Modified Pdf To Document Engine](/guides/web/knowledge-base/save-modified-pdf-to-document-engine.md) - [Show Annotations Properties As Tooltip](/guides/web/knowledge-base/show-annotations-properties-as-tooltip.md) - [Rotate Ink Annotation](/guides/web/knowledge-base/rotate-ink-annotation.md) - [Show Focus Ring Read Only](/guides/web/knowledge-base/show-focus-ring-read-only.md) - [Submit Ink Signatures With Form](/guides/web/knowledge-base/submit-ink-signatures-with-form.md) - [Wait For Element Appear](/guides/web/knowledge-base/wait-for-element-appear.md) - [Web Sdk Vs Dws Viewer](/guides/web/knowledge-base/web-sdk-vs-dws-viewer.md) - [Easily zoom to specific annotations in PDF](/guides/web/knowledge-base/zoom-to-specific-annotation.md)