启用scrollX时，包含按钮下拉列表的行会导致垂直滚动 [英] Row containing a button dropdown causes vertical scrolling when scrollX is enabled

问题描述

由于显示的列数，我有一个启用了scrollX的数据表。表格行包含一个包含多个项目的引导按钮下拉列表。选择下拉菜单时，将启用滚动，很难选择正确的操作。

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?

jsbiddle是 https://jsfiddle.net/darwinaero/q9mLg375/15/

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>

推荐答案

我想到了三个选择of：

You got three options i can think of:

1. 使用CSS和/或JavaScript为<$覆盖溢出 c $ c> div.dataTables_scrollBody -element。


2. 将datatables-settings中的 scrollY 设置为a固定值（例如600，表示600像素）。


3. 编写您自己的dropdown元素，使打开的下拉列表位于表格元素的上方/上方。

1. Overwrite the overflow with css and/or javascript for the div.dataTables_scrollBody-element.
2. Set scrollY in the datatables-settings to a fixed value (like 600, for 600px).
3. 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.

以下是选项1的示例：

由于将溢出设置为可见会导致一些通常我们不希望的滚动行为，所以我们必须听从引导下拉菜单并立即应用溢出样式。

$(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>

这篇关于启用scrollX时，包含按钮下拉列表的行会导致垂直滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！