Why doesn't vue-signature-pad work in a modal?

Question

I am currently using the following library: https://www.npmjs.com/package/vue-signature-pad which has the following example: https://codesandbox.io/s/n5qjp3oqv4

I am applying it as the example, but I have it in a modal:

<v-dialog v-model="canvasVehiculo" fullscreen hide-overlay transition="dialog-bottom-transition">
         <v-card>
         <v-toolbar dark color="primary">
         <v-btn icon dark @click="canvasVehiculo = false">
          <v-icon>close</v-icon>
         </v-btn>
         <v-toolbar-title>Seleccionar partes del vehiculo:</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-toolbar-items>
            <v-btn dark flat @click="undo">Deshacer</v-btn>
          </v-toolbar-items>
        </v-toolbar>
        <v-list three-line subheader>
        <v-subheader></v-subheader>            
        <VueSignaturePad
         id="signature"
         width="100%"
         height="450px"
         ref="signaturePad"
        />
   </v-list>
 </v-card>

<script>
import VueSignature from 'vue-signature-pad'; //Unicamente lo importo
</script>
<style scoped>
#signature {
  border: double 3px transparent;
  border-radius: 5px;
  background-image: url('imagen.png');
  background-size: 900px 456px; 
  background-position: center;
  background-origin: border-box;
  background-clip: content-box, border-box;
}
</style>

If I use it outside of the modal, it works correctly; but in the modal, to make it work, I must modify the size of the screen (for example, by using the DevTools' Toggle device toolbar to see the responsive form).

score 21 · Answer 1 · answered Oct 03 '19 at 10:27

21

Its due to dialog not having width & height yet when the canvas is initializing within it, to solve it, you can pass the resizeCanvas event call to the options of the component:

<VueSignaturePad
    id="signature"
    width="100%"
    height="200px"
    ref="signaturePad"
    :options="{onBegin: () => {$refs.signaturePad.resizeCanvas()}}"
/>

answered Oct 03 '19 at 10:27

eselskas

808
8
17

3

IMO this should be marked as an answer, better practice – Andor Németh Nov 18 '19 at 15:10
2

This should be marked are the right answer! Thanks @eselskas – Emeka Mbah Jun 08 '21 at 19:59

score 6 · Accepted Answer · answered Apr 17 '19 at 11:32

Open DevTools and look at the canvas element. At first you will see its width and height (not width and height styles) is set to 0 then resize the window you will see width and height are change to some values and it works.

At VueSignaturePad.js. look at resizeCanvas methods

canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;

When v-dialog is mounted and then VueSignaturePad is mounted. The resizeCanvas is call once at mounted and at that moment somehow the canvas has no width and height (due to its parent) so it sets those values to 0. After you resize the window it will call again and update those values.

One way to solve this is just call resizeCanvas after its parent finish render.

this.$nextTick(() => {
  this.$refs.signaturePad.resizeCanvas();
})

See codesandbox.

Note: The resizeCanvas is not the official method.

score 0 · Answer 3 · answered Aug 11 '23 at 09:34

0

The Canvas is not being resized as the element does not exist when its initialized. If you are using vue-botostrap: add static and lazy props to the modal. That will solve it.

<b-modal static lazy >

answered Aug 11 '23 at 09:34

Ejilarasan J

310
1
3
11

Why doesn't vue-signature-pad work in a modal?

3 Answers3