Dropdown on bottom of scrollable datatable adds extra space on click

Question

When combining a scrollable datatable and a bootstraps dropdown, clicking a dropdown on bottom of table adds additional white space to the scroll from the popup. I want the dropdown not to added space to the scroll and instead have it appear out of the table. Do you have any ideas on this problem. (it also occurred in boostrap calendar / selectpicker)

The only answer I found is to use dropup

here is sample code JSFIDDLE (click dropdown in the bottom of table)

$(document).ready(function() {
$('#test_Table').DataTable( {
    "scrollY":        "200px",
    "scrollCollapse": true,
    "paging":         false
} );

} );

jsfiddle Code

Answer 1

Use the dropup class for the bottom button so that when you click on drop down the menu comes on top.

JSFIDDLE https://jsfiddle.net/p4j824p0/

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