creagia / laravel-sign-pad

The mouse pointer is not under the 'signature' - see the screenshoot

is that on purpose ?

new, clean Laravel 9 app, laravel Breeze, Tailwind css

blade-template:


<x-guest-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            {{ __('Dashboard') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900 dark:text-gray-100">
                    @if (isset($myModel) && !$myModel->hasBeenSigned())
                        <form action="{{ $myModel->getSignatureRoute() }}" method="POST">
                            @csrf
                            <div style="text-align: center">
                                <x-creagia-signature-pad
                                    border-color="#eaeaea"
                                    pad-classes="rounded-xl border-2"
                                    button-classes="bg-gray-100 px-4 py-2 rounded-xl mt-4"
                                    clear-name="Clear"
                                    submit-name="Submit"
                                />
                            </div>
                        </form>
                        <script src="{{ asset('vendor/sign-pad/sign-pad.min.js') }}"></script>
                    @endif
                </div>
            </div>
        </div>
    </div>
</x-guest-layout>

I've checked it with a fresh Laravel installation and found that the guest layout has a smaller width than the default signature pad:

<div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
    {{ $slot }}
</div>

That sm:max-w-md conflicts with the min width from the package configuration file:

laravel-sign-pad/config/sign-pad.php

Line 17 in 14b5651

'width' => 600,

You can use a wider layout or change the signature width and height to adapt it to your layout. Unfortunately, the sign canvas can't be responsive without a fixed width.

Mouse pointer is off