Dice canvas is small and in the top-left corner

[robinzimmermann]

I am trying out this library. I think I followed the directions in the readme. Functionally it works, but for some reason the dice are really small and only show in the top-left corner. I've attached a screenshot:

The area in the dashed lines seems to be the canvas. I have the height and width at 100%, as the demo says.

I tried copying the code from https://codesandbox.io/s/3d-dice-demo-v1-0-2-sm4ien?file=/src/styles.css:6-596 and it still happens.

Now, I am running this inside a Vue application, but I didn't think it should make a difference. I'm mentioning it just in case it does.

[frankieali4]

It could be that a wrapping element is not at 100%. In the CSS the canvas element is set by it's ID #dice-box canvas. I would check that your html element has the id <div id="dice-box"></div> It could also be that the script is executing before the DOM is ready. Try moving your script tag to the bottom of the .html page or adding the defer attribute to the script tag I haven't used Vue a lot, but I could trying setting up a sandbox. Are you using Vite's Vue template to set up a basic project?

[frankieali4]

Looks like you need to use a deep selector in Vue

#dice-box :deep(canvas) {
  width: 100%;
  height: 100%;
}

https://codesandbox.io/p/sandbox/fervent-river-hv5r22

[robinzimmermann]

OMG you are a friggin' genius! I would never have come up with that fix! Even with the answer I don't know how you figured it out!

Just to say it clearly, your fix worked and this ticket can be closed. Although perhaps the documentation could be updated for this case?

[robinzimmermann]

I'm not sure what the rules for closing are, but if this ticket doesn't get closed shortly, then I'll close it.