JQuery datatable hiding bootstrap dropdown

Question

I'm running into an issue that's hiding a bootstrap dropdown when jquery datatable's scrollX property is set to true. See the screenshots below. Any ideas how to fix this while leaving scrollX set to true?

dataTable = $('#table').DataTable({
        "scrollX" : true
})

<div class="dropdown">
  <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>

  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
          <li><a href="">Edit</a></li>
          <li><a href="">Delete</a></li>
          <li class="divider"></li>
          <li><a href="">Separated link</a></li>

  </ul>

Example: http://jsfiddle.net/dhL40g04/

Bootstrap dropdown shown when scrollX = false

Bootstrap dropdown hidden when scrollX = true

Answer 1

#table .dropdown-menu {
    position: relative;
    float: none;
    width: 160px;
}

Demo

If you want the menu to work without resizing the table, you'll need to move the markup for it outside the table. You could use absolute positioning to gain the same location.