why does enable scroll break drop down menus. scrollY cause the drop down menu no longer show up

rentahippie

$(document).ready(function()
{
// Setup - add a text input to each footer cell
$('#example tfoot th').each( function (i)
{
var title = $('#example thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );

// DataTable
var table = $('#example').DataTable(
{
    scrollY:        "200px",  // turn this off the drop down menu work and show up.
 } );

// Apply the search
table.columns().eq( 0 ).each( function ( colIdx )
{
    $( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
        table
            .column( colIdx )
            .search( this.value )
            .draw();
    } );
} );

$("#example thead th").each( function ( i )
{
    var select = $('<select style="max-width:200px;"><option value="">'+this.innerHTML+'</option></select>')
        .appendTo( $(this).empty() )
        .on( 'change', function ()
        {
            var val = $(this).val();

            table.column( i )
                .search( val ? '^'+$(this).val()+'$' : val, true, false )
                .draw();
        } );

    table.column( i ).data().unique().sort().each( function ( d, j )
    {
        select.append( '<option value="'+d+'">'+d+'</option>' )
    } );

} );

} );