Bootstrap 4 下拉菜单在数据表中不可见

Posted 2023-05-09

【中文标题】Bootstrap 4 下拉菜单在数据表中不可见

【英文标题】：Bootstrap 4 dropdown not-visible inside datatable

【发布时间】：2020-06-02 21:08:01

【问题描述】：

我已经看到 Bootstrap button drop-down inside responsive table not visible because of scroll 和这个 Bootstrap 4 drop-down menu in table 问题，但解决方案不适用于我，因为我使用的是 DataTables 插件。

下拉菜单应该高于一切，但即使按照 Bootstrap 4 文档所述使用data-boundary="window"，它仍然无法正常工作。

您可以在这个 JSFiddle 中看到问题。

没有DataTables的代码，也可以正常工作。

$(table).DataTable(

    'bPaginate'         : true,
    'bLengthChange'     : false,
    'bFilter'           : true,
    'bInfo'             : true,
    'bAutoWidth'        : false,
    'aoColumnDefs'      : [
      
        'bSortable'     : false,
        'aTargets'      : ['nosorting']
      ],
    'aaSorting'         : [],
)

【参考方案1】：

您的数据表溢出。因此，要使您的下拉列表可见，您需要将其附加到正文中。 Solution

【参考方案2】：

刚刚在数据表配置中添加 'scrollY': '50vh', 'scrollCollapse': true

$(function() 
  var table = $('table');

  $(table).DataTable(
    'bPaginate': true,
    'bLengthChange': false,
    'bFilter': true,
    'bInfo': true,
    'bAutoWidth': false,
    'aoColumnDefs': [
      'bSortable': false,
      'aTargets': ['nosorting']
    ],
    'aaSorting': [],
  )
);

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/dataTables.bootstrap4.min.js" type="text/javascript"></script>

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="table-responsive">
        <table class="table table-hover">
          <thead>
            <tr>
              <th>Name</th>
              <th>Options</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>John</td>
              <td>
                <div class="btn-group dropup">
                  <a class="btn dropdown-toggle" data-toggle="dropdown">
            Title
            <span class="caret"></span>
          </a>
                  <ul class="dropdown-menu">
                    <li class="dropdown-submenu"><a>Option 1</a></li>
                    <li class="dropdown-submenu"><a>Option 1</a></li>
                  </ul>
                </div>
                <div class="btn-group dropleft">
                  <button class="btn btn-secondary dropdown-toggle font-10-px" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-boundary="window">Options</button>
                  <div class="dropdown-menu">
                    <button class="dropdown-item font-12-px" type="button">Option 1</button>
                    <button class="dropdown-item font-12-px" type="button">Option 2</button>
                    <button class="dropdown-item font-12-px" type="button">Option 3</button>
                    <button class="dropdown-item font-12-px" type="button">Option 4</button>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

【讨论】：

我希望下拉菜单在所有内容之上，我不希望它滚动。

还是不行。如果我将您的代码完全复制并粘贴到 JSFiddle 中，则会发生相同的错误，而且我想保持 dropleft 行为。

【参考方案3】：

试试这个。我希望它会奏效。但请在移动视图中查看。如果您遇到响应式问题，请将 tabel-responsive 类赋予其父 div。

.table-responsive, .dataTables_scrollBody 
   overflow: visible !important;