Hey there, amazing individuals of the internet! Hope you're all doing well today. I've encountered a rather perplexing issue that's got me stumped.
So, here's the situation - I have this table full of data and I want it to initially be in a collapsed state with a scroll bar. Then, when a button is pressed, the size should adjust automatically based on the number of rows in the table. Essentially, the height would expand dynamically.
An illustration of what I'm aiming for can be found in the table on the right: example
Currently, the div shrinks but the content spills out of it.
If you'd like to check out the code snippet, feel free to visit this link: Snippet Link
Just in case you prefer copying the code directly, here it is below:
const expandCollapseBtn = $('#expand-collapse-btn');
$(expandCollapseBtn).click((e) => {
const divHeight = $(".data-container").height();
if ( divHeight > 400 ) {
$(".data-container").animate({"height": "200px"}, 100);
}
else if ($(".data-container").css("height") == "200px") {
$(".data-container").animate({"height": "400px"}, 100);
}
});.data-container {
min-height: 45px;
background: #fff;
-webkit-box-shadow: 0 1px 5px 0 rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 5px 0 rgba(0,0,0,.2);
box-shadow: 0 1px 5px 0 rgba(0,0,0,.2);
position: relative;
}
.data-container .bg-light {
font-size: 1.1rem;
border-bottom: 1px solid rgba(0,0,0,0.125);
border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
font-weight: 700;
}
.data-container h2 {
font-size: 18px;
margin: 0;
padding: 0;
}
section .data-container .table-container .table-striped > tbody > tr:nth-child(2n+1) > td {
background-color: #f8f9fa;
line-height: 15px;
}
.data-container .table-container table tr td:first-child {
padding-left: 50px;
width: 49%;
text-align: right;
}
.data-container .table-container table tr td:nth-child(2) {
padding: 5px 0 5px 0;
width: 2%;
}
.data-container .table-container table tr td:last-child {
padding-left: 6px;
width: 49%;
}
.data-container .table-container table td {
padding: 5px 18px 5px 20px;
}
.data-container .table-container a {
font-size: 10px;
color: red;
text-decoration: underline;
}
.data-container .table-container tr {
height: 45px;
}
#flag-image {
width: 25px;
height: 25px;
}
.data-container button {
background-color: transparent;
color: #343a40;
border: none;
outline: none;
position: absolute;
left: 50%;
border-bottom-style: dotted;
transform: translateX(-50%);
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="data-container w-75 m-auto">
<div class="card-header bg-light text-center pt-3 pb-3">
<h2>
Total: $200
</h2>
</div>
<div class="table-container">
<table class="table-striped w-100">
<tbody>
<tr>
<td>1</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>2</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>3</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>4</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>5</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>6</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>7</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>8</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>9</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>10</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
</tbody>
</table>
</div>
<button id="expand-collapse-btn">expand ↓</button>
</div>Your assistance in tackling this challenge would be greatly appreciated. Thank you!