selectize plugin is not rendering dropdown outside editor dialog

selectize plugin is not rendering dropdown outside editor dialog

tubedisasterstubedisasters Posts: 7Questions: 1Answers: 1

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

This question has an accepted answers - jump to answer

Answers

  • tubedisasterstubedisasters Posts: 7Questions: 1Answers: 1

    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.

  • allanallan Posts: 61,453Questions: 1Answers: 10,055 Site admin
    Answer ✓

    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

  • tubedisasterstubedisasters Posts: 7Questions: 1Answers: 1

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

This discussion has been closed.