CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
lenny
lenny

Reputation: 784

Bootstrap collapsing table row when clicking button in table row

In my snippet you can see a simple table with one row. In the row you can see a button group. Now, if you click the 'main' button (the reset one) you can see that the table row under the one you clicked will show up. This is supposed to happen only when you click the table row, but not when you click the button inside the table row.

Also, why is it taking so long to revert the collapsing?

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="container body-content">
    <table class="table m-0">
      <thead class="thead-light">
        <tr>
          <th>
            <span class="d-inline-block align-middle">table head</span>
            <button type="button" class="btn btn-secondary btn-sm float-right">button text</button>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr data-toggle="collapse" href="#collapse2" role="button" aria-expanded="false" aria-controls="collapse2">
          <td>
            table content
            <div class="btn-group float-right align-top" onclick=";">
              <button type="button" class="btn btn-warning" onclick="alert('reset!');">reset</button>
              <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
              <div class="dropdown-menu bg-danger">
                <a class="dropdown-item bg-danger text-white" onclick="alert('delete!');">delete</a>
              </div>
            </div>
          </td>
        </tr>
        <tr class="collapse" id="collapse2">
          <td>
            <div class="progress mb-2" data-toggle="tooltip" data-placement="top" title="progress text 1">
              <div class="progress-bar" role="progressbar" style="width: 0%; background-color: #1AFF00" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">progress text 1</div>
            </div>
            <div class="progress mb-2" data-toggle="tooltip" data-placement="top" title="progress text 2">
              <div class="progress-bar" role="progressbar" style="width: 0%; background-color: #2B00FF" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">progress text 2</div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <script>
      $(window).on('load', function () {
        $('[data-toggle="tooltip"]').tooltip();
      });
    </script>
  </div>
</body>

</html>

Upvotes: 0

Views: 2269

Answers (1)

Karlen Kishmiryan
Karlen Kishmiryan

Reputation: 7522

Answering the original question as well as the one in comment.

  1. When you click on the button, the event bubbles up and gets fired on the row element, that's why click handler of row (which toggles the section) also works. To prevent it, you can stop the click event from bubbling up, by calling event.stopPropagation() in reset button's click handler.

  2. The decollapse is slow, because Bootstrap by default applies class .collapsing during the toggling process. This allows to apply some animation. Seems by default it just animates the height of the element. However in your case the animation doesn't work, because the height of the table row can't get less than the content height, but the delay for the intended animation is still exists. You can disable the animation by overriding the default transition by none like I did below, or just use something else other than tables, e.g. div.

So here is the updated version of your code as per my comments:

.collapsing {
    -webkit-transition: none !important;
    transition: none !important;
    display: none;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="container body-content">
    <table class="table m-0">
      <thead class="thead-light">
        <tr>
          <th>
            <span class="d-inline-block align-middle">table head</span>
            <button type="button" class="btn btn-secondary btn-sm float-right">button text</button>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr data-toggle="collapse" href="#collapse2" role="button" aria-expanded="false" aria-controls="collapse2">
          <td>
            table content
            <div class="btn-group float-right align-top" onclick=";">
              <button type="button" class="btn btn-warning" onclick="alert('reset!');event.stopPropagation();">reset</button>
              <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
              <div class="dropdown-menu bg-danger">
                <a class="dropdown-item bg-danger text-white" onclick="alert('delete!');">delete</a>
              </div>
            </div>
          </td>
        </tr>
        <tr class="collapse" id="collapse2">
          <td>
            <div class="progress mb-2" data-toggle="tooltip" data-placement="top" title="progress text 1">
              <div class="progress-bar" role="progressbar" style="width: 0%; background-color: #1AFF00" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">progress text 1</div>
            </div>
            <div class="progress mb-2" data-toggle="tooltip" data-placement="top" title="progress text 2">
              <div class="progress-bar" role="progressbar" style="width: 0%; background-color: #2B00FF" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">progress text 2</div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <script>
      $(window).on('load', function () {
        $('[data-toggle="tooltip"]').tooltip();
      });
    </script>
  </div>
</body>

</html>

Upvotes: 1

Related Questions