Row containing a button dropdown causes vertical scrolling when scrollX is enabled

问题

I have a datatable that has scrollX enabled due to the number of columns displayed. The table rows contain a bootstrap button dropdown with several items. When selecting the dropdown the scroll is enabled and it is difficult to choose the correct action. How can the viewport get resized when the dropdown is selected so the vertical scroll does not appear?

The jsfiddle is https://jsfiddle.net/darwinaero/q9mLg375/15/


    $(function() {

      $('#tblTest').DataTable({
        dom: 'Blfrtip',
        scrollX: true,
        paging: true,
        responsive: true
      });
    });


    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <table id="tblTest">
            <thead>
              <tr>
                <th>Col1</th>
                <th>Col2</th>
                <th>Col3</th>
                <th>Col4</th>
                <th>Col5</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>some data</td>
                <td>some data</td>
                <td>some data</td>
                <td>some data</td>
                <td>
                  <div class="btn-group">
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Action <span class="caret"></span>
      </button>
                    <ul class="dropdown-menu">
                      <li><a href="#">Action</a></li>
                      <li><a href="#">Another action</a></li>
                      <li><a href="#">Something else here</a></li>
                      <li role="separator" class="divider"></li>
                      <li><a href="#">Separated link</a></li>
                    </ul>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

回答1:

You got three options i can think of:

Overwrite the overflow with css and/or javascript for the div.dataTables_scrollBody-element.
Set scrollY in the datatables-settings to a fixed value (like 600, for 600px).
Write your own dropdown-element that renders the opened dropdown-list outside/above the table-element.

The first two options can be achieved quiet simple.

Here is an example for option 1:

Since setting the overflow to visible will create some broken scroll-behavior we normally not want, we have to listen to the events from the bootstrap dropdowns and apply the overflow-style on the fly.

$(function() {       
  $('#tblTest').DataTable({
    dom: 'Blfrtip',
    scrollX: true,
    paging: true,
    responsive: true
  });
  
  $('#tblTest').on('show.bs.dropdown', function () {
    $('.dataTables_scrollBody').addClass('dropdown-visible');
  })
  .on('hide.bs.dropdown', function () {
    $('.dataTables_scrollBody').removeClass('dropdown-visible');
  });
});

div.dataTables_scrollBody.dropdown-visible {
  overflow: visible !important;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <table id="tblTest">
        <thead>
          <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
            <th>Col4</th>
            <th>Col5</th>
            <th>Col6</th>
            <th>Col7</th>
            <th>Col8</th>
            <th>Col9</th>
            <th>Col10</th>
            <th>Col11</th>
            <th>Col12</th>
            <th>Col13</th>
            <th>Col14</th>
            <th>Col15</th>
            <th>Col16</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>some data</td>
            <td>some data</td>
            <td>
<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
            </td>
            <td>some data</td>
            <td>some data</td>
            <td>some data</td>
            <td>some data</td>
            <td>some data</td>
            <td>some data</td>
            <td>some data</td>
            <td>some data</td>
            <td>some data</td>
            <td>some data</td>
            <td>some data</td>
            <td>some data</td>
            <td>some data</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

来源：https://stackoverflow.com/questions/56384285/row-containing-a-button-dropdown-causes-vertical-scrolling-when-scrollx-is-enabl

标签

twitter-bootstrap

datatables

datatables-1.10