Button Moves Weirdly when text is filled in

Question

That is the missalignmentSo, I wanted to program TicTacToe on a Webpage, using plain JavaScript, HTML, and CSS. I've made some logic, so the board can update based on the entries in an array, but when I do that, the buttons aren't in a line anymore, and it looks really bad. Expected result: Text gets filled into the button, the button remains at its place. Actual Result: Text gets filled in but the button moves down. HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <script src="scripts.js"></script>
        <title>My Website</title>
    </head>
    <body>
        <div id="board">
            <div id="row1">
            <button class="field"> </button>
            <button class="field"> </button>
            <button class="field"> </button>
            </div>
            <div id="row2">
            <button class="field"> </button>
            <button class="field"> </button>
            <button class="field"> </button>
            </div>
            <div id="row3">
            <button class="field"> </button>
            <button class="field"> </button>
            <button class="field"> </button>
            </div>
        </div>
    </body>
</html>

CSS:

.field{
   display: inline-block;
   border-style: solid;
   background-color: white;
   height: 100px;
   width: 100px;
   font-size: 10px;
}
#board {
   margin-left: 40%;
   margin-top: 20%;
   height: 50%;
}

JS:

function game() {
    this.board = [
        " ", "x ", " ",
        " ", " ", " ",
        " ", " ", " x"
    ]
    this.printBoard = function(buttons) {
        for(i = 0; i < buttons.length; i++) {
            buttons[i].innerHTML = this.board[i];
        }
    }
    
}
window.onload = function() {
    let buttons = document.getElementsByClassName("field");
    let myGame = new game();
    myGame.printBoard(buttons);
}

Can u share a pic of the misalignment? – Amaarockz Nov 15 '20 at 16:56 — Amaarockz, Nov 15 '20 at 16:56

score 1 · Answer 1 · answered Nov 15 '20 at 17:00

1

You need to have some control at the rows. Try display: flex at the #row1, #row2, #row3

answered Nov 15 '20 at 17:00

Alekos Dordas

802
7
20

Roko C. Buljan · Answer 2 · 2020-11-15T17:34:21.190

class game {
  fig = {x: "&#x2B55;", o: "&#x274C;"};
  board = Array(9).fill("");
  el = document.querySelector("#board");
  
  constructor() {
    this.printBoard();
  }
  
  printBoard(){
    this.el.innerHTML = this.board.reduce((h, f) => h + `<button>${this.fig[f]||""}</button>`, "");
  }
};

const myGame = new game();
myGame.board[0] = "x";
myGame.board[8] = "o";
myGame.printBoard();

#board {
  display: flex;
  flex-flow: row wrap;
  width: 50vh;
  height: 50vh;
}

#board > button {
  flex-grow: 1; 
  --margin: 0vh; /* Set a desired value */
  width: calc(33.333% - var(--margin) * 2); 
  margin: var(--margin);
  border: 0;
  box-shadow: 0 0 0 0.5px #000;
  background-color: white;
  font-size: 10vh;
  line-height: 0;
  cursor: pointer;
  transition: background 0.3s;
}
#board > button:hover {
  background: #0bf;
}

<div id="board"></div>

Button Moves Weirdly when text is filled in

2 Answers2