Selectize.js 和 Datatables 水平滚动

Question

我有一个包含 individual column searching (with select inputs). Now I want to add 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，但我不知道如何让所有 select 选项可见。

如何防止 select 选项被隐藏？

Answer 1

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

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

The element the dropdown menu is appended to. This should be 'body' or null. If null, the dropdown will be appended as a child of the Selectize control.

这使得本例中的元素（部分）不可见，因为行 (tfoot>tr>td) 具有固定高度。

将 dropdownParent 设置为 body 有帮助：

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

已更新 fiddle：https://jsfiddle.net/svierkant/maa64vw4/4/

Selectize.js 和 Datatables 水平滚动

Selectize.js and Datatables horizontal scrolling

jquery

css

datatable

selectize.js