Issue
I have created a table with bootstrap 4 like this, but it seems that when we put "collapse" class on a table row it will act differently from if we put on a div element. As you can see if we click animate div, the target div will be animated smoothly, but when we click animate tr, the tr is not animate, how can I animate the tr as so?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="card-body justify-content-center">
<p><a class="btn btn-primary collapsed" data-toggle="collapse" href="#collapseProduct" role="button" aria-expanded="false" aria-controls="collapseProduct">Animate div</a><button class="btn btn-primary collapsed" type="button" data-toggle="collapse" data-target="#collapseProduct0"
aria-expanded="false" aria-controls="collapseProduct0">Animate tr</button></p>
<div class="collapse" id="collapseProduct" style="">
<div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
</div>
<table class="table table-hover">
<tbody>
<tr>
<th>Name</th>
<th>Description</th>
<th>Product Group</th>
<th class="text-center">Taxable</th>
<th class="text-center">Tax Included</th>
<th></th>
</tr>
<tr>
<td>Bitwolf</td>
<td>Focused value-added access</td>
<td>Sepatu Futsal</td>
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
<td class="text-center"><i class="fa fa-check text-info"></i></td>
<td>
<div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary collapsed" data-toggle="collapse" data-target="#collapseProduct0" aria-expanded="false" aria-controls="collapseProduct0"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
</td>
</tr>
<tr class="collapse" id="collapseProduct0" style="">
<td colspan="6">
<div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
</td>
</tr>
<tr>
<td>Keylex</td>
<td>Focused client-driven groupware</td>
<td>gtr</td>
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
<td>
<div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary collapsed" data-toggle="collapse" data-target="#collapseProduct1" aria-expanded="false" aria-controls="collapseProduct1"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
</td>
</tr>
<tr class="collapse" id="collapseProduct1" style="">
<td colspan="6">
<div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
</td>
</tr>
<tr>
<td>Cardguard</td>
<td>Realigned zero defect policy</td>
<td>Sepatu Futsal</td>
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
<td class="text-center"><i class="fa fa-check text-info"></i></td>
<td>
<div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary" data-toggle="collapse" data-target="#collapseProduct2" aria-expanded="false" aria-controls="collapseProduct2"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
</td>
</tr>
<tr class="collapse" id="collapseProduct2">
<td colspan="6">
<div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
</td>
</tr>
<tr>
<td>Temp</td>
<td>Monitored zero defect groupware</td>
<td>Sepatu Bola</td>
<td class="text-center"><i class="fa fa-check text-info"></i></td>
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
<td>
<div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary" data-toggle="collapse" data-target="#collapseProduct3" aria-expanded="false" aria-controls="collapseProduct3"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
</td>
</tr>
<tr class="collapse" id="collapseProduct3">
<td colspan="6">
<div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
</td>
</tr>
<tr>
<td>Zontrax</td>
<td>User-friendly multimedia interface</td>
<td>gtr</td>
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
<td class="text-center"><i class="fa fa-check text-info"></i></td>
<td>
<div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary" data-toggle="collapse" data-target="#collapseProduct4" aria-expanded="false" aria-controls="collapseProduct4"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
</td>
</tr>
<tr class="collapse" id="collapseProduct4">
<td colspan="6">
<div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
</td>
</tr>
<tr>
<td>Andalax</td>
<td>Assimilated global forecast</td>
<td>gtr</td>
<td class="text-center"><i class="fa fa-check text-info"></i></td>
<td class="text-center"><i class="fa fa-check text-info"></i></td>
<td>
<div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary" data-toggle="collapse" data-target="#collapseProduct5" aria-expanded="false" aria-controls="collapseProduct5"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
</td>
</tr>
<tr class="collapse" id="collapseProduct5">
<td colspan="6">
<div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
</td>
</tr>
<tr>
<td>Domainer</td>
<td>Future-proofed intangible focus group</td>
<td>Sepatu Bola</td>
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
<td>
<div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary" data-toggle="collapse" data-target="#collapseProduct6" aria-expanded="false" aria-controls="collapseProduct6"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
</td>
</tr>
<tr class="collapse" id="collapseProduct6">
<td colspan="6">
<div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
</td>
</tr>
</tbody>
</table>
</div>Solution
Instead of tr class="collapse" id="collapseProduct0" on the tr ... i just gave it to a new div which now covers the <div class="card card-body">... </div>; Doing this left a padding (from bootstrap) - to get rid of this padding, we introduced a new class which ensured that when the row is in collapsed state, there is nothing there.
Below code should get you what you're looking for...
.collapseContainingDiv td {
padding: 0 !important;
}<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="card-body justify-content-center">
<p><a class="btn btn-primary collapsed" data-toggle="collapse" href="#collapseProduct" role="button" aria-expanded="false" aria-controls="collapseProduct">Animate div</a><button class="btn btn-primary collapsed" type="button" data-toggle="collapse" data-target="#collapseProduct0"
aria-expanded="false" aria-controls="collapseProduct0">Animate tr</button></p>
<div class="collapse" id="collapseProduct" style="">
<div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
</div>
<table class="table table-hover">
<tbody>
<tr>
<th>Name</th>
<th>Description</th>
<th>Product Group</th>
<th class="text-center">Taxable</th>
<th class="text-center">Tax Included</th>
<th></th>
</tr>
<tr>
<td>Bitwolf</td>
<td>Focused value-added access</td>
<td>Sepatu Futsal</td>
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
<td class="text-center"><i class="fa fa-check text-info"></i></td>
<td>
<div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary collapsed" data-toggle="collapse" data-target="#collapseProduct0" aria-expanded="false" aria-controls="collapseProduct0"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
</td>
</tr>
<tr class="collapseContainingDiv">
<td colspan="6">
<div class="collapse" id="collapseProduct0" style="">
<div class="card card-body">SECOND Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
</div>
</td>
</tr>
<tr>
<td>Keylex</td>
<td>Focused client-driven groupware</td>
<td>gtr</td>
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
<td>
<div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary collapsed" data-toggle="collapse" data-target="#collapseProduct1" aria-expanded="false" aria-controls="collapseProduct1"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
</td>
</tr>
<tr class="collapse" id="collapseProduct1" style="">
<td colspan="6">
<div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
</td>
</tr>
<tr>
<td>Cardguard</td>
<td>Realigned zero defect policy</td>
<td>Sepatu Futsal</td>
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
<td class="text-center"><i class="fa fa-check text-info"></i></td>
<td>
<div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary" data-toggle="collapse" data-target="#collapseProduct2" aria-expanded="false" aria-controls="collapseProduct2"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
</td>
</tr>
<tr class="collapse" id="collapseProduct2">
<td colspan="6">
<div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
</td>
</tr>
<tr>
<td>Temp</td>
<td>Monitored zero defect groupware</td>
<td>Sepatu Bola</td>
<td class="text-center"><i class="fa fa-check text-info"></i></td>
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
<td>
<div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary" data-toggle="collapse" data-target="#collapseProduct3" aria-expanded="false" aria-controls="collapseProduct3"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
</td>
</tr>
<tr class="collapse" id="collapseProduct3">
<td colspan="6">
<div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
</td>
</tr>
<tr>
<td>Zontrax</td>
<td>User-friendly multimedia interface</td>
<td>gtr</td>
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
<td class="text-center"><i class="fa fa-check text-info"></i></td>
<td>
<div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary" data-toggle="collapse" data-target="#collapseProduct4" aria-expanded="false" aria-controls="collapseProduct4"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
</td>
</tr>
<tr class="collapse" id="collapseProduct4">
<td colspan="6">
<div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
</td>
</tr>
<tr>
<td>Andalax</td>
<td>Assimilated global forecast</td>
<td>gtr</td>
<td class="text-center"><i class="fa fa-check text-info"></i></td>
<td class="text-center"><i class="fa fa-check text-info"></i></td>
<td>
<div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary" data-toggle="collapse" data-target="#collapseProduct5" aria-expanded="false" aria-controls="collapseProduct5"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
</td>
</tr>
<tr class="collapse" id="collapseProduct5">
<td colspan="6">
<div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
</td>
</tr>
<tr>
<td>Domainer</td>
<td>Future-proofed intangible focus group</td>
<td>Sepatu Bola</td>
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
<td>
<div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary" data-toggle="collapse" data-target="#collapseProduct6" aria-expanded="false" aria-controls="collapseProduct6"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
</td>
</tr>
<tr class="collapse" id="collapseProduct6">
<td colspan="6">
<div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
</td>
</tr>
</tbody>
</table>
</div>Answered By - Akber Iqbal
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.