selectize plugin is not rendering dropdown outside editor dialog

tubedisasters

My code is exactly the same as the example on the 'editor selectize' plugin site other than for the fact that I am using ajax to fetch and store into local_storage. I have a public link here and would very much appreciate any tips:

http://stats.championdata.com/editorTest/test.html

tubedisasters

Just in case you can't see the entire subject line ... it is the fact that the dropdown is not appearing outside of the editor dialog that is the issue. I am expecting that the selectized select will render like a regular select and not put a scroll bar on the edit dialog.

allan

Hi,

Thanks for your question. So the issue here is that by default Selectize will attach its dropdown element to the same node that the select element is in. That is a problem here as Editor has to have that element set to hide overflowing content (for longer forms that scroll).

The solution is to use Seliectize's dropdownParent option set to body.

in the Selectize Editor plug-in replace:

        conf._input.selectize( $.extend( {
            valueField: 'value',
            labelField: 'label'
        }, conf.opts ) );

with:

        conf._input.selectize( $.extend( {
            valueField: 'value',
            labelField: 'label',
            dropdownParent: 'body'
        }, conf.opts ) );

You will also need a splash of CSS:

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

I'll include this in the next update to the Editor plug-ins!

Regards,
Allan

tubedisasters

That fixes the problem Allan. Thank you for your quick and helpful assistance.