Selectize.js和Datatables水平滚动

Question

我有一个Datatable与individual column searching (with select inputs)。现在我想添加Selectize.js，但我无法弄清楚如何正确使用它。

当我启用horizontal scrolling时，下拉部分是隐藏的。

很简单的例子：

<table class="table table-hover table-striped"> 
    <tfoot> 
     <tr> 
      <td><select></selection> 
     </tr> 
    </tfoot> 
</table> 
<script> 
$(document).ready(function() { 
    $('table').DataTable({ 
     "scrollX": true, 
    }); 
    $('select').selectize(); 
}); 
</script> 

我创建了一个的jsfiddle这里：https://jsfiddle.net/svierkant/maa64vw4/3/

我试过一个z-index添加到多个地方，但我不能弄清楚如何让所有选择选项可见。

如何防止隐藏选择选项？

Answer 1

您可以选择要添加selectize-dropdown元素的位置。默认情况下，它被追加为Selectize控件的子：

https://github.com/selectize/selectize.js/blob/master/docs/usage.md：

下拉菜单附加到的元素。这应该是'body'或 null。如果为null，则将下拉列表作为 Selectize控件的子项。

由于行（tfoot>tr>td）具有固定的高度，因此在此情况下会使元素（部分）不可见。

设置dropdownParent到body帮助：

$('select').selectize({ 
    "dropdownParent": "body" 
}); 

更新小提琴：https://jsfiddle.net/svierkant/maa64vw4/4/