Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to set the size? #18

Open
facku opened this issue Sep 12, 2020 · 2 comments
Open

How to set the size? #18

facku opened this issue Sep 12, 2020 · 2 comments

Comments

@facku
Copy link

facku commented Sep 12, 2020

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

@vitogit
Copy link
Owner

vitogit commented Sep 29, 2020

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;
}

@Matthew-Nicholson
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants