When using the bootstrap card columns masonry and a user clicks on a button inside a card, the height of the card changes dynamically by adding a card-footer.
However, in certain situations, the cards change position causing a jumpy effect.
To see this issue in action, click on the select button of the first card in this JSFiddle. You will notice that the cards shift positions, especially when there are four cards lined up next to each other. (Adjusting the window size may help replicate the problem more easily)
https://jsfiddle.net/rvt8a690/2/
EDIT: If you're having trouble recreating the bug, try resizing the screen. I've also created a gif illustrating the issue: https://i.stack.imgur.com/29TXc.gif
$('.ccs-product-counter').on('click', function(e) {
let selectedProductID = $(this).find('span.badge').attr("data-product-id");
if (!$('#undo-p-id-' + selectedProductID).hasClass("UndoIsVisible")) {
$('#undo-p-id-' + selectedProductID).removeClass('d-none');
$('#undo-p-id-' + selectedProductID).addClass('fadeInDown');
$('#undo-p-id-' + selectedProductID).addClass('UndoIsVisible');
$('#card-p-id-' + selectedProductID).addClass('animationIsRunning');
setTimeout(function() {
$('#undo-p-id-' + selectedProductID).removeClass('fadeInDown');
$('#card-p-id-' + selectedProductID).removeClass('animationIsRunning');
}, 800);
}
});@media (min-width: 34em) {
.card-columns {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
}
@media (min-width: 48em) {
.card-columns {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
}
@media (min-width: 62em) {
.card-columns {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
}
@media (min-width: 75em) {
.card-columns {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
}<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container mt-3 mb-5">
<div class="card-columns transaction">
<div id="card-p-id-1" class="card product-card">
<img class="card-img-top noselect" src="https://via.placeholder.com/120" />
<div class="card-body">
<h5 class="card-title mb-0">Title</h5>
<p class="card-text mt-0">
<i class="f-14">
Subtitle
</i>
</p>
<p class="card-text">
Lorem ipsum dolor sit amet
</p>
<p>
<strong>Price: 2$</strong>
<br/>
<strong>Stock: 5</strong>
</p>
<button type="button" class="btn btn-primary d-block center-margin-0-auto ccs-product-counter">Select <span id="add-p-id-1" class="badge badge-light" data-product-id="1">0</span>
</button>
</div>
<div id="undo-p-id-1" class="card-footer text-muted text-center ccs-undo-selection animated d-none noselect">
<div class="ccs-undo-selection-inner noselect">
<i class="fas fa-eraser"></i> Undo selection
</div>
</div>
</div>
<!-- More card elements go here as needed -->
</div>
</div>