On a mobile interface, the signature field is automatically rotated and depending on the dimensions of the device, it does not rotate in a useable way; this is incredibly inconsistent. I use the browser to test device dimensions and I can not tell what all is being considered by LF on making this decision. Sometimes on a phone it doesn't rotate, sometimes on a desktop in a browser that has an aspect ratio similar to a phone it does rotate; what is LF considering when it decides to do this, and how can I enforce that if it's going to rotate it has to inherit window dimensions so I don't end up with this:
Question
Question
Signature field rotates incorrectly on mobile
Replies
Hi Scott,
Which version of Forms are you using?
And on which mobile device did you see this issue?
The mobile version of sign signature dialog show when frontend found the browser was on mobile or ipad (by checking user agent); what you have seen should be a bug.
Hey Rui,
I thought I found a workaround but it is not holding up long term.
We are on 10.4, and so far it's seen on some older Android tablets, iPhone X, and iPad mini among others.
But it's a bit more complicated; we are housing this form in an iframe and the iframe is influencing the dimensions of the form at the time it loads. So it registers as loading on a mobile device, but the dimensions are off.
The result is that some devices load the signature pad like that.
The workaround I'm using is hilarious and ugly and just replaces the css so you can continue to use it:
/****************************************************/ /****************************************************/ let fixArr = []; $(document).ready(function () { if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && window.matchMedia("only screen and (max-width: 760px)").matches) { let sigArr = Array.from(document.querySelectorAll('[attrtype=signature]')); for (let i = 0; i < sigArr.length; i++) { fixArr.push(Array.from(sigArr[i].querySelectorAll('input[type=button]'))); } for (let i = 0; i < fixArr.length; i++) { for (let j = 0; j < fixArr[i].length; j++) { fixArr[i][j].addEventListener("click", function() { $('#form-signature-mobile-dlg').attr("style", "top:0px; display:block; padding-top:50%").find('.modal-dialog').attr("style", "transform:rotate(90deg); transition-duration:0s; position:fixed; width:34em; height:12em;")}); } } } }); /****************************************************/ /****************************************************/