Smooth Signature widget is not responsive on mobile

Hi there, 

I'm currently using the SmoothSignature widget but it doesn't seem to be responsive to mobile. I've tried adding only that field to a blank form and it still doesn't seem to scale down. Is there a way to achieve this, maybe via CSS?

Cheers, 

Rob

Hi Rob,

Have you tried following this guide: https://www.jotform.com/help/311-How-to-make-Forms-Mobile-Responsive. That should make your signature mobile responsive. If that doesn't work, try using the mobile responsive widget.

We can also try using a custom CSS code but we'll need to clone the form you are working on that we can get the correct CSS selectors. You can also use the E-Signature widget, we have some custom CSS to make it more responsive. 

Let us know which one will work for you.

Hi Charlie,

The from was already set as responsive and I didn't have luck with the mobile responsive widget so no go there.

I also find the E-Signature widget painful to use in practice, so my preference would be to get some CSS going for the SmoothSignature widget if that's possible.

The form I'm working on is: http://form.jotform.co/form/52136688412861?

I've added a random signature field at the start of the form for testing purposes.

Cheers, 

Rob

Hi,

Thank you for the confirmation. It might take some time for me to come up with a working CSS code for the Smooth Signature, I see you have a couple of signatures in your form. Let me try making it today and I'll get back to you as soon as I have a working one.

Thank you for your patience.

Hi Rob,

Unfortunately, it seems like we can't make the correct responsiveness for the Smooth Signature widget, the custom CSS code also won't work as the widget is wrapped in an iFrame, which means external styling like CSS won't affect it.

But the E-Signature was designed to be easily customizable. Here's a sample cloned form based from your original one, I removed the signature widget in the top page and replaced it with an E-Signature widget: http://form.jotformpro.com/form/52151114298955.

What I did:

1. I disabled the mobile responsive options in Preferences and in the Form Designer Tool.

2. I then used the Mobile Responsive Widget. 

3. I then added the E-Signature widget then used this custom CSS code:

@media screen and (max-width: 480px){

    canvas.jSignature {

        width : 100% !important;

    }

    .signature-pad-wrapper {

        width : 100% !important;

    }

    .signature-line.signature-wrapper {

        width : 100% !important;

    }

    .pad {

        width : 100% !important;

    }

}

We can further design the widget if you want because its not wrapped in iFrame.

Let us know if this works.

I have also forwarded this to our widget team so that they can see if they can resolve the problem in the non-responsiveness of the Smooth Signature widget.

We will update you on this thread when we hear any news.

Apologies for the inconvenience.

OK such is life. I prefer the way that output for SmoothSignature looks but will put up with it for responsiveness.

Cheers, 

Rob

Hello Rob,

The widget was actually designed with mobile responsiveness in mind whenever a dynamic width was declared using CSS

Please try out this stripped down version of your form: http://form.jotformpro.com/form/52160759923965?

This was achieved by just adding the Mobile Responsive widget on your form. 

Please let us know if this works for you, and if you see any limitations you need addressed.