Bootstrap 4 dropdown not-visible inside datatable

Question

I have seen Bootstrap button drop-down inside responsive table not visible because of scroll and this Bootstrap 4 drop-down menu in table question but the solutions does not work with me because I'm using the DataTables plugin.

The dropdown menu should be above everything, but even after using data-boundary="window" as the Bootstrap 4 documentation tells, it still does not work.

You can see the problem in this JSFiddle.

Without the code of DataTables, it works just fine.

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

Answer 1

You have an overflow on your data table. So to make your dropdown visible, you need to append it to the body. Solution

Answer 2

Just added in datatable configuration '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 3

Try This. I hope it will work. But please check this in mobile view. If you face responsive issue then give tabel-responsive class to its parent div.

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