-
-
Notifications
You must be signed in to change notification settings - Fork 257
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
cg-container causes my sizes to be messed up #252
Comments
Fwiw, the width and height of |
Im not sure how others have done it but i got a relatively responsive board with this approach: mounted() {
this.calculateSquareSize();
window.addEventListener("resize", this.calculateSquareSize);
},
beforeDestroy() {
window.removeEventListener("resize", this.calculateSquareSize);
}, calculateSquareSize() {
// let width = board_space.offsetWidth - 7; // for the numbers on the side of the ground
// width -= width % 8; // fix chrome alignment errors; https://github.com/ornicar/lila/pull/3881
const boardSpace = this.$refs.boardSpace as HTMLElement;
const boardWrap = document.querySelector(".cg-wrap") as HTMLElement;
const rect = boardSpace.getBoundingClientRect();
let size = Math.min(rect.width, rect.height);
size -= 7; // adjust for borders and padding
size -= size % 8; // ensure the size is a multiple of 8
boardWrap.style.width = size + "px";
boardWrap.style.height = size + "px";
document.body.dispatchEvent(new Event("chessground.resize"));
// idk why i need to do this again, but it works it also yeets the call stack.
// Fix to resize the board when using windows maximize button
window.dispatchEvent(new Event("resize"));
}, html <div class="board-space" ref="boardSpace">
<div class="board" ref="board"></div>
</div> css .board-space {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I've got a chessground setup and I'm trying to make a responsive board using grid but my board overflows my grid because for some reason the board is set to 960 x 960 pixels (see screenshot), can this be removed so the user can pick their own size, this is highly frustrating because settings height's and width's like that is very anti responsive
The text was updated successfully, but these errors were encountered: