Border makes content inside li shift

Question

Whenever I select a li, I made a function so that the border is white. However, the border shifts the content inside the box a few pixels. How can I prevent this from happening?

$("ul.quantity-grid li").click(function() {
  $(this).addClass("active").siblings().removeClass("active");
});

.quantity-grid {
  list-style-type: none;
  color: #fff;
  margin: 5% auto;
  padding-left: 0px;
  width: 40vw;
  height: 50vh;
  text-align: center;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  overflow: hidden;
}

.quantity-grid li {
  font-family: "calibreb";
  font-size: 40px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.05);
  overflow: hidden;
  border: none;
}

.quantity-grid li h3 {
  margin: 10% 0 8px 0;
}

.quantity-grid li img {
  height: 60%;
  padding-top: 8%;
}

.quantity-grid li.active {
  border: 4px solid #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="quantity-grid">
  <li class="1bag" data-value="1">
    <h3>1 BAG, $35</h3>
    <img src="img/1bag.png">
  </li>

  <li class="2bags" data-value="2">
    <h3>2 BAGS, $45</h3>
    <img src="img/2bags.png">
  </li>

  <li class="3bags" data-value="3">
    <h3>3 BAGS, $65</h3>
    <img src="img/3bags.png">
  </li>

  <li class="4bags" data-value="4">
    <h3>4 BAGS, $55</h3>
    <img src="img/4bags.png">
  </li>
</ul>

score 1 · Answer 1 · answered May 08 '18 at 20:11

1

Borders add to the overall width of a content box so it would shift the elements. You would need to make the non .active have margin: 4; to counter the 4px; that are being toggled in and out of the view by the border.

answered May 08 '18 at 20:11

Dadsquatch

566
5
16

Jonathan Rys · Answer 2 · 2018-05-08T20:14:57.460

1

Give it an invisible border

.quantity-grid li {
  font-family: "calibreb";
  font-size: 40px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.05);
  overflow: hidden;
  border: 4px solid transparent;
}

It has the advantage of not using your margin in case you want to use the margin for some other styling.

edited May 08 '18 at 20:14

answered May 08 '18 at 20:12

Jonathan Rys

1,782
1
13
25

yeah normally i go for that approach to – af costa May 08 '18 at 20:12
This is probably a better way to code it. – Dadsquatch May 08 '18 at 20:13
yeah, this worked. sad i couldn't think of it on my own. thanks! – Kylie Ritchie May 08 '18 at 20:19

score 1 · Answer 3 · answered May 08 '18 at 20:14

You might also be able to change the box-sizing css property to border-box. This will count the border (and padding) as part of the width and height, keeping them the same when you add the border.

The box-sizing property can be used to adjust this behavior:

content-box gives you the default CSS box-sizing behavior. If you set an element's width to 100 pixels, then the element's content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width.

border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.

source: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

score 0 · Answer 4 · answered May 08 '18 at 20:15

What I usually do in these cases is keep a transparent border inplace for the inactive state and just add in the color for the active state. This will keep the elements in place

$('ul').on('click', 'li',function(){
  $('li').removeClass('active');
  $(this).addClass('active');
})

li {
  padding: 0.5rem;
  border: 2px solid transparent;
}

li.active {
  border: 2px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li> Item One </li>
  <li> Item Two </li>
  <li> Iem Three </li>
</ul>

Border makes content inside li shift

4 Answers4