Closed srinisubramanian closed 7 months ago
Hello @srinisubramanian,
Thanks for reaching out!
We are able to replicate this issue on our side. We have created a ticket and will let you know the priority next week after our planning session. For reference, the ticket number is FIO-1280.
Have a great day!
If there is a preferred solution let me know and we can submit a PR to speed it up
There is already a method in the Signature component to "redraw" the signature called checkSize
https://github.com/formio/formio.js/blob/master/src/components/signature/Signature.js#L130
My guess is that this method is not getting triggered at the right time for your use case. I would set a break point to see if this is the case. If not, then you can submit a pull request that binds the correct event that will fire when your use case is triggered and ensure that this method is called.
@travist Thanks for the hint. Resize seems to be called. Checking if it's happening at the right time. Will update
@travist Checked again with the latest version and the app we are working on .. the issue is a little different.
What you explained above is working and checkSize works as expected, let's assume the user filled it out on a mobile width 300px and height 150px. When this is shown on web, the panel is resized to let's say width 600 and height 150. The issue is the image is also scaled to fit. So the height remains 150px but the width is increased. This is not an aspect fit but really a stretch.
Since the height remains 150px, an aspect fit would mean retain the same width. So although the panel is larger the signature should probably not be stretched/scaled to fit. Any suggestions on what would be a good solution?
We should not be stretching it, so that would be considered a bug. We should probably capture the signature radio (width/height) at the time of signature, and then ensure that ratio is maintained every time we render a signature. We are not currently doing this, so it would need to be developed. We will add it to our backlog, but this may be a good item for someone in the community to tackle since it will be a while before we get to it.
@travist that is right. This would simply mean there should be no expansion I guess. Since height is always fixed either to 150px or user defined and only width is changing, the signature should just be redrawn 1:1 in the expanded panel. This would mean the signature would probably need to appear to the left?
The next question would obviously be how to handle down sizing? For eg fill via web and open on mobile. That would probably mean no stretching but compressing should be done.
Facing this same issue, any update to handle this issue? Thanks in advance.
Hello @Anandks1993
This item has been added to. our backlog. We welcome a PR or we also have a process to expedite if you are interested.
Just following up if this item has filtered through the backlog at all ? If not, can you point me to the process to expedite - my company may considered it.
@rustymcg9000 We were faced with the same issue. Quite frankly there was no solution we could come up with that would satisfy all screen sizes - either height remains constant and you get shrinkage from big screens, or height maintains ratio and gets large when entered in mobile but viewed on large screens...
We decided instead to fix the width of the signature to 420px (though we see old mobile devices with 375px - this is portrait), that way all our (self generated) PDF documents would at least have the same layout.
We did this by monkey patching - yes, not pretty but we were under time constraints (this is pretty much our code):
var SignatureComponent = window.Formio.Components.components.signature;
// old schema and init hook
SignatureComponent.schemaSuper = SignatureComponent.schema;
SignatureComponent.prototype.initSuper = SignatureComponent.prototype.init;
// wire signature field overrides
SignatureComponent.schema = function (...extend) {
return SignatureComponent.schemaSuper({ width: '420px' }, ...extend);
}
SignatureComponent.prototype.init = function () {
// call base class
SignatureComponent.prototype.initSuper.call(this);
// and override width
this.component.width = '420px';
}
We would replace this with a solution that provided consistency across all devices...
We're currently addressing a backlog of GitHub issues. Closing this thread as it is outdated. Please re-open if it is still relevant. Thank you for your contribution!
Environment
Please provide as many details as you can:
Steps to Reproduce
Expected behavior
Signature fits into the panel without distortion
Observed behavior
Signature is getting truncated / enlarged
Example
Use this form for testing: https://iyeoemuuwlaldgx.form.io/signtest (Actually any form with a signature component and filled on mobile and viewed on web or exported to PDF will exhibit the same behavior)
Filled on mobile:![image](https://user-images.githubusercontent.com/8343179/106088822-ae067680-614c-11eb-97a2-302319b17d30.png)
Expanded on web:![image](https://user-images.githubusercontent.com/8343179/106088886-cffff900-614c-11eb-9e16-75bed6838c9f.png)
PDF: download (4).pdf