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/