Piano only shows one key

[timbarclay]

Hi, I'm probably doing something wrong, but I've tried to create a Vue component based on the set up instructions in the readme but it only renders a small part of the keyboard.

I read that it's supposed to fill its container but I've set the container element as width: 100% and it doesn't seem to make any difference.

Here's the code of the component:

<template>
  <div id="piano-container"></div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Instrument } from "piano-chart";
export default Vue.extend({
  mounted() {
    const piano = new Instrument(document.getElementById('piano-container') as HTMLElement);
    piano.create();
  }
})
</script>

<style lang="scss">
#piano-container {
  width: 100%;
  height: 200px;
}
</style>

[wiese]

(Not the lib author)

That looks pretty sane, I'm effectively doing the same - should work. Could you provide a reproduction (codesandbox or comparable)?

As a side note, consider using vue's ref attribute to avoid having to find the piano-container element in the DOM.