Bootstrap 4 выпадающий список невидим внутри

Question

Я видел, как раскрывающийся список Bootstrap внутри адаптивной таблицы не виден из-за прокрутки и этого Bootstrap 4 выпадающего меню в таблице вопрос, но решения не работает со мной, потому что я использую плагин DataTables.

Выпадающее меню должно быть выше всего, но даже после использования data-boundary="window" как Документация Bootstrap 4 говорит, что она все еще не работает.

Вы можете увидеть проблему в этом JSFiddle .

Без кода DataTables, он работает просто отлично.

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

Answer 1

Только что добавлено в конфигурации с датами '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>

Answer 2

Ваша таблица данных переполнена. Таким образом, чтобы сделать выпадающий список видимым, вам нужно добавить его в тело. Решение