CODEWITHSUNDEEP
jquerycssdatatableselectize.js
Stephan Vierkant
Stephan Vierkant

Reputation: 10164

Selectize.js and Datatables horizontal scrolling

I've got a Datatable with individual column searching (with select inputs). Now I want to add Selectize.js to it, but I can't figure out how to get it right.

When I enable horizontal scrolling, the pulldown is partly hidden:.

Selectize.js with Datatables and horizontal scrolling

Very simple example:

<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>

I've created a JSFiddle here: https://jsfiddle.net/svierkant/maa64vw4/3/

I've tried to add a z-index to multiple places, but I can't figure out how to get all the select options visible.

How can I prevent the select options from being hidden?

Upvotes: 0

Views: 1243

Answers (1)

Stephan Vierkant
Stephan Vierkant

Reputation: 10164

You can choose where the selectize-dropdown element should be added. By default, it is appended as a child of the Selectize control:

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.

This makes the element in this case (partly) invisible, since the row (tfoot>tr>td) has a fixed height.

Setting dropdownParent to body helps:

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

Updated fiddle: https://jsfiddle.net/svierkant/maa64vw4/4/

Upvotes: 1

Related Questions