I added a click effect to my calculator keys but when you click one of them the others move too!! Ca-CodePudding

Like I've written in the title when you click one of the keys the others in the same column move too. How can I solve this problem? I would like them to stay in their place when you click one key! There should be the "button clicked effect" while respecting the spaces. I hope that the code is clear enough: I divided the calculator in two parts, the screen and the keyboard. You can find my problem in the keyboard section!

Thank you!

const keys = document.querySelectorAll('#keys-container div');
keys.forEach(key => key.addEventListener('mousedown', () => key.classList.add('press-div')
));
keys.forEach(key => key.addEventListener('mouseup', () => key.classList.remove('press-div')
));

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

body > div {
    border: 1px solid black;
}



#display-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 142px;
    width: 440px;
}
#display-border {
    border: 1px solid black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 80px;
    width: 410px;

}
#display {
    border: 1px solid black;
    height: 70px;
    width: 400px;
}




#keyboard {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 420px;
    width: 440px;
}
#keys-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    border: 1px solid black;
    gap: 12px;
    height: 377px;
    width: 410px;
}
#keys-container div {
    display: flex;
    justify-content: center;
    align-items: center;
    /*box-sizing: border-box;*/
    border: 1px solid black;
    border-bottom: 3px solid black;
    height: 60px;
    width: 80px;
    transition: 0.01s;
}
#keys-container .press-div {
    border-bottom: 1px solid black;
    
}

<body>

    <div id="display-container">
        <div id="display-border">
            <div id="display"></div>
        </div>
    </div>


    <div id="keyboard">
        <div id="keys-container">
            <div>ON/C</div>
            <div>7</div>
            <div>4</div>
            <div>1</div>
            <div>0</div>
            <div>CE</div>
            <div>8</div>
            <div>5</div>
            <div>2</div>
            <div>&#8901;</div>
            <div>&#177;</div>
            <div>9</div>
            <div>6</div>
            <div>3</div>
            <div>&#61;</div>
            <div>&#247;</div>
            <div>&#215;</div>
            <div>&#8722;</div>
            <div style="height: 136px">&#43;</div>
        </div>
    </div>

</body>

CodePudding user response：

Well, when you decrease the border size on the bottom of the key, you decrease the height of the content, moving everything under it upwards to fill the 2px space.

Just keep the space consistent by replacing that 2px border perhaps with a margin instead.

#keys-container .press-div {
    border-bottom: 1px solid black;
    margin-bottom: 2px;
}

CodePudding user response：

In your current CSS border (as well as padding) is not counted in the total element height, this results in jitter when changing the border-bottom value.

Adding * { box-sizing: border-box } to your CSS will solve the problem as border and padding values will now be counted as part of the total element width/height. Reference MDN: box-sizing.

Check the first line of CSS in the the snippet:

const keys = document.querySelectorAll('#keys-container div');
keys.forEach(key => key.addEventListener('mousedown', () => key.classList.add('press-div')));
keys.forEach(key => key.addEventListener('mouseup', () => key.classList.remove('press-div')));

* {
  box-sizing: border-box
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

body>div {
  border: 1px solid black;
}

#display-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 142px;
  width: 440px;
}

#display-border {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 80px;
  width: 410px;
}

#display {
  border: 1px solid black;
  height: 70px;
  width: 400px;
}

#keyboard {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 420px;
  width: 440px;
}

#keys-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
  gap: 12px;
  height: 377px;
  width: 410px;
}

#keys-container div {
  display: flex;
  justify-content: center;
  align-items: center;
  /*box-sizing: border-box;*/
  border: 1px solid black;
  border-bottom: 3px solid black;
  height: 60px;
  width: 80px;
  transition: 0.01s;
}

#keys-container .press-div {
  border-bottom: 1px solid black;
}

<div id="display-container">
  <div id="display-border">
    <div id="display"></div>
  </div>
</div>

<div id="keyboard">
  <div id="keys-container">
    <div>ON/C</div>
    <div>7</div>
    <div>4</div>
    <div>1</div>
    <div>0</div>
    <div>CE</div>
    <div>8</div>
    <div>5</div>
    <div>2</div>
    <div>&#8901;</div>
    <div>&#177;</div>
    <div>9</div>
    <div>6</div>
    <div>3</div>
    <div>&#61;</div>
    <div>&#247;</div>
    <div>&#215;</div>
    <div>&#8722;</div>
    <div style="height: 136px">&#43;</div>
  </div>
</div>