Resizing the signature field

[joelzerner]

Describe the bug

I may be missing something super obvious here (sorry if I am) but I can't figure out how to set the width and the height of the signature field. It gives options for background, foreground and pen size but that's it. When I try to resize by CSS, it doesn't work because the initial size of the canvas means the pen and pointer don't align. It's defaulting to 600 by 600 piels so it's not an ideal size.

Steps to reproduce

1. Add a signature field
2. Adjust settings

Form settings

• Multi-page form: Either
• Submission Method: Either
• Client-side Validation: Either
• Custom Form Templates: Either

Craft CMS version

4.8.10

Plugin version

2.1.12

Multi-site?

No response

Additional context

No response

[engram-design]

It's not a setting in the field UI, and it's controlled with CSS variables.

.fui-type-signature .fui-input-container canvas {
    --fui-signature-width: 100%;
    --fui-signature-height: 20rem;
}

[joelzerner]

Ah, I see. However we're using an alternate form template which outputs the Basic CSS but not the Theme CSS which means those CSS vars don't work.

Interestingly enough, even switching on Output Theme and manipulating the signature field size using those variables, I still noticed that the pointer and the pen didn't align when I tried drawing a signature.

Again - I could be missing something or doing something wrong here!

[engram-design]

Ah, gotcha, yes any sort of styling is part of the "Theme CSS".

You might be better setting constraints on the outer container:

.fui-type-signature .fui-input-container {
    position: relative;
    width: 32rem;
    height: 22rem;
}

.fui-type-signature .fui-input-container canvas {
    --fui-signature-width: 100%;
    --fui-signature-height: 100%;
}

And have the canvas be responsive to that container. The clear button in particular is relatively positioned so that'd why I mention that.

I will also mention that changing these styles in the developer tools at real-time will skew the pen on the canvas. These CSS properties need to be set before render.

[joelzerner]

Thanks Josh. Super helpful. I managed to get something working with this:

.fui-type-signature .fui-input-container {
  position: relative;
  width: 42rem;
  height: 18rem;
}

.fui-type-signature .fui-input-container canvas {
  width: 100%;
  height: 100%;
}

Just needed to apply a width and height directly to the canvas as the CSS variables didn't do anything without the Formie CSS Theme applied.

[engram-design]

Just needed to apply a width and height directly to the canvas as the CSS variables didn't do anything without the Formie CSS Theme applied.

Oh yeah, of course!