JQuery datatable hiding bootstrap downdown

Question

I am having a problem that hides the bootstrap popup when the jquery datatable scrollX property is set to true. See screenshots below. Any ideas how to fix this by 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 popup shown when scrollX = false

Bootstrap popup is 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 need to move the markup outside the table. You can use absolute positioning to get the same location.