How to set the canvas width to 100% width of a column?

[Luudanhnhan1102]

Hi staskobzar, thank you so much for making this library but how can I set the width of canvas element(AvWaveform) to 100% width of a row like the audio element below? I know that there's a prop "canv-width" but it only accepts number type so it's hard to set the canvas width equals to a row width(bootstrap).

[staskobzar]

Hi @Luudanhnhan1102 The relative values for canvas are not supported and fixed numbers are needed to calculate all the animation. But you can use a trick to get parent "div" width with javascript then assign it to the component and render it. Here is an example that works for me:

<template>
  <div ref="parentDiv" style="width:88%">
    <av-waveform v-if="doRender" :canv-width="cW"
      audio-src="file_example_MP3_1MG.mp3"
    ></av-waveform>
  </div>
</template>

<script>
export default {
  name: 'av-waveform-demo',
  data () {
    return {
      cW: 0,
      doRender: false
    }
  },
  mounted () {
    // reset AvWaveform element width
    this.cW = this.$refs.parentDiv.offsetWidth
    // render it
    this.doRender = true
  }
}
</script>

[Luudanhnhan1102]

Thank you so much for answering me. It finally works.

[staskobzar]

You are welcome @Luudanhnhan1102 Have a good day!