Rex Rex - 1 month ago 20
jQuery Question

Bootstrap table how hidden, when toggled visible using javascript it does not show correctly

I have a bootstrap table. I am using css to hide one of the table rows initially. I have a checkbox that I want to show the hidden table row if it is selected, otherwise it should not show the row. I have it working, but when the checkbox is selected, the format (width) of the now visible row is out of whack (not aligned). I tried playing with the css for this hidden row (width, display inline-table...) but I cannot get it to work.

CSS:

#hiddenRow {
display: none;
}
.orderTotal {
padding: 10px;
background-color: #fdfbe4;
width: 95%;
margin: 0 auto;
}
.orderTotal h4 {
font-weight: bold;
}
.totalOrder {
color: #ee7a23;
font-weight: bold;
font-size: 18px;
}
.totalAmount {
font-weight: bold;
font-size: 18px;
}


Table html:

<div class="orderTotal">
<h4>Order Total:</h4

<table id="tableOrderTotal" class="table tableTotal">
<tbody>
<tr>
<td>Item1</td>
<td class="price-1">50</td>
</tr>
<tr id="hiddenRow">
<td>Item2</td>
<td class="price-2">13</td>
</tr>
<tr>
<td>Item3</td>
<td class="price-3">30</td>
</tr>
<tr class="summary">
<td class="totalOrder">Total:</td>
<td id="result" class="totalAmount"></td>
</tr>

</tbody>
</table>
</div>


JS to show hidden table row:

// hide table row from order total if not checked
$("input[name='product_CD']").on("click", function() {
$("#hiddenRow").toggleClass('show');
});


Here is a screenshot of how the row displays when the checkbox is selected.

Notice how the width of the row and the price column is not aligned. It previews fine if the row is not initially hidden and it also toggles visible/hidden fine in a browser when inspecting the element and manually toggling the
#hiddenRow
display:none
css on and off.

enter image description here

Answer

I made a jsfiddle: https://jsfiddle.net/ov7d9rLa/

I think the problem might have been due to fighting between using bootstrap and CSS for hiding/showing. I simplified this by using the bootstrap class "hidden", and toggling that class with the click event.

<div class="orderTotal">
   <h4>Order Total:</h4>

   <table id="tableOrderTotal" class="table tableTotal">
    <tbody>
       <tr>
         <td>Item1</td>
         <td class="price-1">50</td>
       </tr>
       <tr id='hiddenRow' class="hidden">
         <td>Item2</td>
         <td class="price-2">13</td>
       </tr>
       <tr>
        <td>Item3</td>
        <td class="price-3">30</td>
       </tr>
       <tr class="summary">
        <td class="totalOrder">Total:</td>
        <td id="result" class="totalAmount"></td>
       </tr>

     </tbody>
   </table>
 </div>

 <button id='toggle' class='btn btn-primary'>
Toggle
</button>

JS:

$("#toggle").on("click", function() {
    $("#hiddenRow").toggleClass("hidden");
});