vue-chessboard icon indicating copy to clipboard operation
vue-chessboard copied to clipboard

How to set the size?

Open facku opened this issue 4 years ago • 2 comments

Hi, how i can set the size of the board? I like to set him to the 100% if the parent element width,

facku avatar Sep 12 '20 02:09 facku

That's a good question, I can't investigate this now but I think you should overwrite this css rule and play a little with it. By default is 320px here is 600px. If the pieces looks bad I think you need to redraw it with something like document.body.dispatchEvent(new Event('chessground.resize')) The base library to display the chessboard is https://github.com/ornicar/chessground

.cg-board-wrap {
    width: 600px;
    height: 600px;
    position: relative;
    display: block;
}

vitogit avatar Sep 29 '20 21:09 vitogit

I used the following technique and I think it's pretty good.

  1. Give the element a :key ...
  2. Set componentKey to 0 in your data object ... data() { return { componentKey: 0 }}
  3. Create a method which increments your component key ... incKey() {this.componentKey += 1}
  4. Use the created hook to add an event listener ('resize') and run your method ... window.addEventListener('resize', this.incKey()).
  5. Make sure you remove the event listener on the destroyed hook.

Maybe a little hacky but it should be extremely performant and it forces the board to re-render every time the window is resized and the key changes.

Matthew-Nicholson avatar Apr 03 '21 07:04 Matthew-Nicholson