'Vuetify dialog and vue-signature-pad draw problems

I try to use vue-signature-pad inside my Vuetify UI and its working 100% when i don't use dialog, so i want to open a dialog and use the vue-signature-pad plugin but now i can't draw on it.

hope someone can help me with my issue

my dialog code look like this:

<v-dialog v-model="dialog" persistent max-width="600px">
    <v-card>
        <v-card-title>
        <span class="headline">Underskrift</span>
        </v-card-title>
        <v-card-text>
        <v-container grid-list-md>
            <VueSignaturePad id="signature" width="100%"  height="300px" ref="signaturePad" />
            <br />

            <v-layout wrap>
            <v-flex xs12 sm6 md4>
                <v-text-field label="Legal first name*" required></v-text-field>
            </v-flex>
            <v-flex xs12 sm6 md4>
                <v-text-field label="Legal middle name"></v-text-field>
            </v-flex>
            <v-flex xs12 sm6 md4>
                <v-text-field
                label="Legal last name*"
                persistent-hint
                required
                ></v-text-field>
            </v-flex>
            <v-flex xs12>
                <v-text-field label="Email*" required></v-text-field>
            </v-flex>
            </v-layout>
        </v-container>

        </v-card-text>
        <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="blue darken-1" flat @click="dialog = false">Close</v-btn>
        <v-btn color="blue darken-1" flat @click="dialog = false">Save</v-btn>
        </v-card-actions>
    </v-card>
</v-dialog>
vue.jsvue-componentvuetify.js


Solution 1:[1]

<VueSignaturePad :options="{onBegin: () => {$refs.signaturePad.resizeCanvas()}}" ref="signaturePad"/>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ryan M

Related Questions