Syncfusion eSigning Form Designer not working on iPad

5 Replies
2 Participants

Created by
NC Neil Cooper-Smith

Platform
ASP.NET Core - EJ 2

Platform
ASP.NET Core - EJ 2

Control
PDF Viewer

Created On
Feb 6, 2026 11:47 AM UTC

Last Activity On
Mar 5, 2026 01:51 PM UTC

Want to subscribe?
SIGN IN

When rendering the eSigning Form Designer on the iPad (iOS 18.6.2 iPad 14) we are getting the following error:

TypeError: undefined is not an object (evaluating 'o.style’)

Location: https://cdn.syncfusion.com/ej2/32.1.21/dist/ej2.min.js (anonymous function) (ej2.min.js:10:15610219)

The offending piece of code:

        var t,
            i,
            n = this.getToolbarHeight(n),
            o = this.pdfViewerBase.navigationPane.sideBarToolbar,
            r = this.pdfViewerBase.navigationPane.sideBarContentContainer,
            a = this.pdfViewerBase.navigationPane.commentPanelContainer,
            s = this.pdfViewerBase.navigationPane.commentPanelResizer,
            l = "";
        e ? (this.pdfViewer.enableToolbar ? (Ue(o) || (o.style.top = n + i + "px"), Ue(r) || (r.style.top = n + i + "px"), Ue(t) || (t.style.top = n + i + "px"), Ue(a) || (a.style.top = n + i + "px"), Ue(s) || (s.style.top = n + i + "px")) : (o.style.top = i + "px", r.style.top = i + "px", t.style.top = i + "px", a.style.top = i + "px", s.style.top = n + i + "px"), this.pdfViewer.enableToolbar || (n = 0), this.pdfViewerBase.viewerContainer.style.height = this.updateViewerHeight(this.getElementHeight(this.pdfViewerBase.viewerContainer), i + n) + "px", l = this.getNavigationToolbarHeight(i + n), Ue(o) || (o.style.height = l), Ue(t) || (t.style.height = l), Ue(s) || (s.style.height = l), Ue(r) || (r.style.height = l)) : (this.pdfViewer.enableToolbar ? (o.style.top = n + "px", r.style.top = n + "px", t.style.top = n + "px", a.style.top = n + "px", s.style.top = n + "px") : (o.style.top = "1px", o.style.height = "100%", r.style.top = "1px", r.style.height = "100%", t.style.top = "1px", t.style.height = "100%", a.style.top = "1px", a.style.height = "100%", s.style.top = "1px", s.style.height = "100%"), this.pdfViewer.enableToolbar || (n = 0), this.pdfViewerBase.viewerContainer.style.height = this.updateViewerHeight(this.getElementHeight(this.pdfViewerBase.viewerContainer), i) + "px", l = this.getNavigationToolbarHeight(n), Ue(o) || (o.style.height = l), Ue(t) || (t.style.height = l), Ue(s) || (s.style.height = l), Ue(r) || (r.style.height = l), "0px" === this.pdfViewerBase.viewerContainer.style.height && (this.pdfViewerBase.viewerContainer.style.height = parseInt(this.pdfViewer.element.style.height, 10) - parseInt(o.style.top, 10) + "px"))

The side bar toolbar is undefined. Perhaps this is happening because we can se that the sidebar is hidden on the iPad and only the signature button is on the bottom bar.

Please note, we have no issues on Mac, PC or Android, this is just on the iPad.

We tried to see if we could recreate the issue using your Example of eSigning Form Designer in ASP.NET Core PDF Viewer Control (which we copied from for our code):

https://document.syncfusion.com/demos/pdf-viewer/asp-net-core/pdfviewer/esigningformdesigner#/tailwind3

We opened this link in Safari on the Pad, but noticed that the menu item on the left hand navigation pane for “eSigning Form Designer” is hidden on the iPad, and so couldn’t test it. Does this mean that you know that there is a known issue with this demo on the iPad, hence why you are hiding it?

Here is our razor page for your reference:

@model BP.UI.ViewModels.BPDocumentSigning.SigningFormDesignerViewModel

@using BP.UI.Controllers

@using Syncfusion.EJ2

<form method="post"

action="@Url.Action(nameof(BPDocumentSigningController.SigningFormDesigner))"

data-ajax="true"

data-ajax-method="post"

data-ajax-success="signingFormDesignerSuccess(data)"

data-ajax-failure="signingFormDesignerFailure(data)"

id="frmSigningFormDesigner">

</form>

</div>

<ejs-sidebar id="sidebarObj" Width="100px" Position="Left" HtmlAttributes="@ViewData["HtmlAttribute"]" enableGestures="false">

<e-content-template>

<ejs-button id="signature-btn" class="e-pv-e-sign-form-field-property" iconCss="e-icons e-signature" onclick="signature(event)" content="Signature" cssClass="e-outline"></ejs-button>

</div>

</e-content-template>

</ejs-sidebar>

<ejs-pdfviewer id="pdfviewer"

enableToolbar="false"

enableNavigationToolbar="false"

enableAnnotationToolbar="false"

downloadFileName='eSign_designMode.pdf'

showNotificationDialog="false"

documentLoad="documentLoad"

resourceUrl="https://cdn.syncfusion.com/ej2/32.1.21/dist/ej2-pdfviewer-lib"

documentPath="@Model.DocumentUrl"

formFieldAdd="addFormField"

pageClick="pageClick"

toolbarSettings='@(new Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings { ShowTooltip = true, ToolbarItems = "OpenOption,PageNavigationTool,MagnificationTool,DownloadOption,PrintOption,FormDesignerEditTool" })'>

</ejs-pdfviewer>

</div>

<ejs-toolbar id="e-pv-e-sign-toolbar-section-mob" cssClass="e-pv-e-sign-toolbar-section-mob">

<e-toolbar-items>

<e-toolbar-item id="signature" prefixIcon="e-icons e-signature" click='signature'></e-toolbar-item>

</e-toolbar-items>

</ejs-toolbar>

</div>

<button id="signingFormDesignerSubmitBtn" type="button" class="btn btn-primary" onclick="modifyDocumentTemplateSignatureSubmit(event);" data-loading-text="<i class='fa fa-spinner fa-spin '></i> Processing ...">@(Model.SendEmail ? "Create & Send Link" : "Create Link")</button>

</div>

</div>

var pdfViewer;

var defaultFieldWidth = 200;

var defaultFieldHeight = 24;

var checkBoxFieldSize = 20;

var radioFieldSize = 20;

var SignatureFieldSize = 66;

var ListFieldSize = 66;

var currentFieldType = '';

var isDropped = false;

var zoomfactor;

var defaultZoomFactor = false;

var isMobile = ej.base.Browser.isDevice;

console.log('building pdfg viewer');

window.onload = function () {

console.log('window.onload ENTER');

pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];

console.log(pdfViewer);

console.log('window.onload EXIT');

}

function modifyDocumentTemplateSignatureSubmit(e) {

console.log('modifyDocumentTemplateSignatureSubmit ENTER');

var signatureCount = pdfViewer.formFieldCollection.filter(function(item) {

return item.properties.formFieldAnnotationType === 'SignatureField';

});

if (signatureCount.length === 0) {

alert('You must add a signature box to the document.')

return;

}

$('#signingFormDesignerSubmitBtn').button('loading');

pdfViewer.saveAsBlob().then(function (blobData) {

const reader = new FileReader();

reader.onload = (function () {

$('#PdfBase64').val(reader.result);

$('#frmSigningFormDesigner').submit();

});

reader.readAsDataURL(blobData);

});

console.log('modifyDocumentTemplateSignatureSubmit EXIT');

}

function initializeDraggable(element, fieldType) {

console.log('initializeDraggable ENTER');

let cloneElement;

new ej.base.Draggable(element, {

helper: (e) => {

if (e.sender.type == "mousemove") {

console.log('mousemove');

zoomFactor = pdfViewer.viewerBase.getZoomFactor();

cloneElement = document.createElement('div');

cloneElement.style.width = (defaultFieldWidth * zoomFactor) + 'px';

cloneElement.style.height = (defaultFieldHeight * zoomFactor) + 'px';

cloneElement.style.borderRadius = '0';

cloneElement.style.backgroundColor = "salmon";

cloneElement.style.opacity = '0.5';

switch (fieldType) {

case 'SignatureField':

case 'InitialField':

cloneElement.style.height = (SignatureFieldSize * zoomFactor) + 'px';

break;

case 'CheckBox':

cloneElement.style.height = (checkBoxFieldSize * zoomFactor) + 'px';

cloneElement.style.width = (checkBoxFieldSize * zoomFactor) + 'px';

break;

case 'RadioButton':

cloneElement.style.height = (radioFieldSize * zoomFactor) + 'px';

cloneElement.style.width = (radioFieldSize * zoomFactor) + 'px';

cloneElement.style.borderRadius = '50%';

break;

case 'ListBox':

cloneElement.style.height = (ListFieldSize * zoomFactor) + 'px';

break;

}

cloneElement.style.zIndex = '10005';

cloneElement.style.position = 'absolute';

cloneElement.style.pointerEvents = 'none';

document.body.appendChild(cloneElement);

return cloneElement;

}else{

return null;

}

dragStart: (e) => {

currentFieldType = fieldType;

isDropped = true;

dragStop: (e) => {

if (e.helper && e.helper.parentNode) {

e.helper.parentNode.removeChild(e.helper);

}

isDropped = false;

clone: true,

cursorAt: getCursorAtPosition(fieldType),

enableTailMode: true,

});

console.log('initializeDraggable EXIT');

}

function getCursorAtPosition(fieldType) {

console.log('getCursorAtPosition ENTER');

if (defaultZoomFactor) {

zoomFactor = 1;

} else {

zoomFactor = pdfViewer.viewerBase.getZoomFactor();

}

var left, top;

let scaledWidth = defaultFieldWidth * zoomFactor;

let scaledHeight = defaultFieldHeight * zoomFactor;

switch (fieldType) {

case 'CheckBox':

case 'RadioButton':

scaledWidth = checkBoxFieldSize * zoomFactor;

scaledHeight = checkBoxFieldSize * zoomFactor;

left = 0;

top = (checkBoxFieldSize / 2) * zoomFactor - (scaledHeight / 2);

break;

case 'ListBox':

scaledHeight = ListFieldSize * zoomFactor;

left = 90;

top = (ListFieldSize / 2) * zoomFactor - (scaledHeight / 2);

break;

case 'SignatureField':

case 'InitialField':

scaledHeight = SignatureFieldSize * zoomFactor;

left = 90;

top = (SignatureFieldSize / 2) * zoomFactor - (scaledHeight / 2);

break;

default:

scaledHeight = defaultFieldHeight * zoomFactor;

left = 90;

top = (defaultFieldHeight / 2) * zoomFactor - (scaledHeight / 2);

break;

}

left = left / zoomFactor - (scaledWidth / 2);

console.log('getCursorAtPosition EXIT');

return { left: left, top: top };

}

function pageClick(args) {

if (isDropped) {

isDropped = false;

let width = defaultFieldWidth;

let height = defaultFieldHeight;

switch (currentFieldType) {

case 'SignatureField':

case 'InitialField':

height = SignatureFieldSize;

break;

case 'CheckBox':

case 'RadioButton':

width = checkBoxFieldSize;

height = checkBoxFieldSize;

break;

case 'ListBox':

height = ListFieldSize;

break;

}

pdfViewer.formDesignerModule.addFormField(currentFieldType, { bounds: { X: args.x, Y: args.y, Width: width, Height: height }});

}

function toolbarCreated() {

const layout = document.getElementById('e-pv-e-sign-layout');

const dropdown = document.getElementById('e-pv-e-sign-dropdown-menu-mob');

const sidebar = document.getElementById('sidebarObj');

const viewerDiv = document.getElementById('e-pv-e-sign-pdfViewer-div');

const downloadElement = document.getElementById("e-pv-e-sign-download");

const toolbarElementMob = document.getElementById("e-pv-e-sign-toolbar-section-mob");

if (isMobile) {

layout.style.display = 'block';

dropdown.style.display = 'block';

toolbarElementMob.style.display = 'flex';

sidebar.style.display = 'none';

viewerDiv.style.width = '100%';

downloadElement.style.border = 'none';

downloadElement.style.width = '40px';

downloadElement.removeChild(downloadElement.lastChild);

} else {

layout.style.display = 'flex';

dropdown.style.display = 'none';

toolbarElementMob.style.display = 'none';

sidebar.style.display = 'block';

viewerDiv.style.width = 'calc(100% - 200px)';

downloadElement.style.width = '115px';

downloadElement.style.width = '1px solid #C4C7C5';

}

function signature(e) {