Problem with Selectize Rendering

rf1234

Tried to use selectize today after failing with select2 due to performance issues (select2 had great difficulty processing a list of 4000+ options loaded from the server; you can't limit the number of options retrieved using select2 - at least I didn't find an option to do this. However: The rendering with select2 was perfect ...).

The issue is that selectize opens the dropdown behind the Editor modal. Looks strange. You can't select anything this way. Can you help me with this please.

This is Javascript for Editor:

function tblUser() {
    var userEditor = new $.fn.dataTable.Editor( {
        ajax: {
            url: 'actions.php?action=tblUser'
        },
        table: "#tblUser",
        fields: [ {
                label: "Address:",
                name:  "user.title",
                type:  "select",
                options: [
                    { label: "Mr.", value: "Mr." },
                    { label: "Ms.", value: "Ms." }
                ]
            }, {
                label: "Title (if any):",
                name:  "user.acad"
            }, {
                label: "First name:",
                name:  "user.firstname"
            }, {
                label: "Last name:",
                name:  "user.lastname"
            }, {
                label: "Language:",
                name:  "user.language",
                type:  "select",
                options: [
                    { label: "Deutsch", value: "de-DE" },
                    { label: "English", value: "en-GB" }
                ]
            }, {
                label: "Type:",
                name:  "user.type"
            }, {
                label: "Role:",
                name:  "user.role"
            }, {               
                label: "Email:",
                name:  "user.email"
            }, {
                label: "Creditor Name:",
                name:  "user.creditor_id",
                type: "selectize",
                opts: {
                    create: false,
                    maxItems: 1,
                    maxOptions: 20,
                    allowEmptyOption: false,
                    closeAfterSelect: true,
                    placeholder: "Select Creditor"
                }
//             type:  "select2",
//             opts: {
//                   "placeholder": "Select Creditor",
//                   "allowClear": true,
//                   "multiple": false
//             }
            }
        ]        
    } );

rf1234

In the meantime I could resolve the problem. I had the following statement in my CSS:

div.selectize-dropdown {
  z-index: 102; }

I changed it to:

div.selectize-dropdown {
  z-index: 2001; }

I am using Data Tables 1.10.12, Editor PHP 1.5.6 and Selectize 0.12.1 - everything downloaded from the DataTables site. The CSS I had to change had been included in those downloads. I found the correct CSS here: https://editor.datatables.net/plug-ins/field-type/editor.selectize

It would be great if someone could make a plugin for Twitter Typeahead. That's my preferred solution.

allan

Thanks for posting back. I'm going to push an update out to the site shortly with an update for that CSS as it has caught a few out (including me!).

I haven't seen typeahead before - that looks great! Added to my list . Expect to see it on the site soon(ish).

Allan