I have a div on my webpage that resembles a receipt. This div dynamically adds X items, with a full height of 95% for graphic design purposes. The problem arises when the div reaches 95% of the screen height and a new item is added, causing the entire page to become scrollable instead of just the list-group where the items are added.
Here is an overview of my layout:
var products = [
{ desc: "Ham", quantity: 2, price: 2 },
{ desc: "Beef", quantity: 1, price: 15 },
{ desc: "Tomatoes", quantity: 6, price: 3 },
{ desc: "Pandoro", quantity: 5, price: 22 },
{ desc: "Yogurt", quantity: 3, price: 5 },
];
$(".total").on("click", function () {
$(".btn-finish").removeAttr("disabled");
$(".list-group").append(
$("<li>", {
class: "list-group-item d-flex justify-content-between",
}).append(
$("<span>", { class: "desc" }).text(products[0].desc),
$("<span>", { class: "quantity" }).text(products[0].quantity),
$("<span>", { class: "price" }).text(products[0].price)
)
);
});html, body {
height: 100%;
}
.receipt {
position: relative;
background: #f8f7f5;
max-height: 95%;
padding: 1rem;
font-size: 1.4rem;
}
.receipt:after {
content: " ";
display: block;
height: 24px;
position: absolute;
left: 0;
right: 0;
}
.receipt:after {
bottom: -14px;
background: linear-gradient(135deg, #fcfcfb 25%, transparent 25%), linear-gradient(225deg, #fcfcfb 25%, transparent 25%), linear-gradient(315deg, #00383e 25%, transparent 25%) -7px 0, linear-gradient(45deg, #00383e 25%, transparent 25%) -7px 0;
background-size: 24px 24px;
background-color: #dcdcdb;
}
.list-group-item {
border-color: #fff;
border-radius: 0.25rem;
margin-bottom: 1rem;
border-top-width: 1px !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="caa8a5a5beb9beb8abba8afee4ffe4f9">[email protected]</a>/dist/css/bootstrap.min.css" />
<div class="row h-100">
<div class="col-5">
<div class="receipt">
<h4>Your Cart</h4>
<hr />
<ul class="list-group"></ul>
<div class="alert alert-dark total" role="alert">
Total
<span class="price float-right">€0.00</span>
</div>
<div class="alert alert-success" role="alert">
Loyalty
<span class="float-right">001230013212</span>
</div>
</div>
</div>
<div class="col-7">
STUFF
</div>
</div>To add items dynamically, simply click on the button with the class .total
Any ideas on how to make only the list-group scrollable when the .receipt reaches its maximum height?