Selectize.js和Datatables水平滚动

Question

我有一个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：

  

附加下拉菜单的元素。这应该是'身体'或   空值。如果为null，则下拉列表将作为子项附加   选择控制。

这使得元素在这种情况下（部分）不可见，因为行（tfoot>tr>td）具有固定的高度。

将dropdownParent设置为body有助于：

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

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