'Bootstrap card columns masonry effect - change height cards are jumpy
I use the bootstrap card columns masonry. If the use clicks on a button (inside the card) the height of the card is changed (I dynamically add the card-footer).
The problem is, in special constellations the cards change the position and it looks kinda "jumpy".
I set up this jsfiddle. Just click on the firsts card select button and you will see the card among them will jump to the right. (Maybe change the window size until you have 4 cards next to each other)
https://jsfiddle.net/rvt8a690/2/
EDIT: Maybe you have to play a bit with the screen size if you can't recreate the bug. But I made this little gif where you can see the bug:
$('.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>
<div id="card-p-id-2" class="card product-card">
<img class="card-img-top noselect" src="https://via.placeholder.com/150" />
<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">
Descrconsetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut l
</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-2" class="badge badge-light" data-product-id="2">0</span>
</button>
</div>
<div id="undo-p-id-2" 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>
<div id="card-p-id-3" class="card product-card">
<img class="card-img-top noselect" src="https://via.placeholder.com/100" />
<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">
Descr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eiption
</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-3" class="badge badge-light" data-product-id="3">0</span>
</button>
</div>
<div id="undo-p-id-3" 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>
<div id="card-p-id-4" class="card product-card">
<img class="card-img-top noselect" src="https://via.placeholder.com/180" />
<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 consetetur sadipscing elitr, sed diam nonumy e
</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-4" class="badge badge-light" data-product-id="4">0</span>
</button>
</div>
<div id="undo-p-id-4" 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>
<div id="card-p-id-5" class="card product-card">
<img class="card-img-top noselect" src="https://via.placeholder.com/110" />
<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">
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
</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-5" class="badge badge-light" data-product-id="5">0</span>
</button>
</div>
<div id="undo-p-id-5" 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>
</div>
</div>Solution 1:[1]
Your problem happens because you are adding the undo button to the bottom of your card and this will break the card columns layout that will be rearranged. to avoid this problem, set a static undo button to the bottom of your cards and disable it until the user click on the select button. Whit this dirt fix, you'll be sure that the height of the cards are always the same and the layout will not change.
Solution 2:[2]
You should try this solution, here you can dynamically show and hide buttons.
<button type="button" class="btn btn-primary 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>
<button type="button" class="btn btn-secondary" style="float:right">Undo</button>
Solution 3:[3]
I've had this issue for several days now. I kept having to change the way things are displayed or pop up. I believe that I have found the solution to this issue.
In the card-columns style, there's an attribute called orphans and the value is 1. I overwrite it to orphans: unset;
This way, the cards will not try to rearrange themselves when the height of the card changes.
ug9mLytojsFiddle
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | dwpu |
| Solution 2 | |
| Solution 3 | Tan |