VueSignaturePad not display properly until browser resize

Hi, I am clearly doing something wrong but when I view the page with the signature pad on it all I get is the border until I manually resize the browser window, then the signature pad appear along with anything that may have been scribbled onto the blank space. Below is the code:

<template>
    <v-container fluid grid-list-md>
        <div class="display-1">Create a new order</div>
        <v-dialog v-model="dialog" fullscreen hide-overlay transition="dialog-bottom-transition">
          <v-btn slot="activator" color="primary" dark>Sign For Order</v-btn>
          <v-card height="100%">
            <v-toolbar dark color="primary">
              <v-toolbar-title>Sign Below</v-toolbar-title>
              <v-btn icon dark @click="dialog = !dialog"></v-btn>
            </v-toolbar>

            <VueSignaturePad
              width="95%"
              height="80%"
              ref="signaturePad"
              :options="sigopt"
              :customStyle="sigStyle"
            />

            <v-btn @click="clear">Clear</v-btn>
            <v-btn @click="save">Finalize Order</v-btn>
          </v-card>
        </v-dialog>
    </v-container>
</template>

<script>
import VueSignaturePad from 'vue-signature-pad'

export default {
  created() {
  },
  data() {
    return {
      sigopt: {
        backgroundColor: 'rgb(250,235,215)',
        minWidth: 2.0,
      },
      sigStyle: { 
        border: '1px black solid',
      },
      dialog: false,
    }
  },
  methods: {
    clear() {
    },
    save() {
      this.dialog = false
    },
  },
  components: {
    VueSignaturePad
  }
}
</script>

Sorry if this isn’t the place to ask this but,=, is it my code or a bug of some kind. Kindly appreciate any help. Thanks.

[camoore]

I ran into this same issue and the best solution I found was to call the resizeCanvas in the onBegin function

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

[Leemanbok]

I got the same experience and found one of the solutions.

 this.$nextTick(function () {
            this.$refs.signaturePad.resizeCanvas()
          })

After the event that the screen changes, I called the resize command of the pad and found that the width and height were normally applied.

Write in the hope that it will help you a little. : D