Selectize not applied to all select elements and dropdown not showing

[gwillie]

On wordpress 3.6 using advanced custom fields plugin, choosing all select's with

$('select').selectize(options);

selectize isnt applied to all select elements, and dropdowns are behind other elements as per screenshot.

I'm not JS savvy so cant offer much more than that.

[brianreavis]

Not On All Elements

It's impossible to debug without more info. Are the "post" fields <select> elements? Can you verify this in the inspector? Are there any exceptions in the console?

Dropdown Clipping

You'll need to either remove overflow: hidden on the parent container, or use the dropdownParent: "body" setting to keep the dropdown menu from being clipped. If it is actually a z-index problem, use a higher z-index on .selectize-dropdown-menu.

[gwillie]

You've done a great job with selectize, better than chosen or select2. Today i tried all three and selectize.js won by a mile, so my apologies for not reading the docs thoroughly.

Dropdown Clipping
dropdownParent: "body" solved the clipping :)

Not On All Elements
Yes, the "post" fields are <select> elements and no errors in console. If i knew how to actually debug i could offer more than this.

And
selectized <select> dropdowns do not display when opened from a previously hidden block. I had the same issue with select2 (issue #1155). so if element didn't exist on page load, then some script creates a <select>, selectize will do something, but no div dropdown appears.

Geezs i'm not much help in diagnosing but i can surely type about it ;) If you know of a good (chrome) js debug tutorial i would love to know and read it. Apart from that i'm as useless as an honest politician when it come to JS.

Let me know what i can do to help, as i will be using selectize wherever possible now.

[brianreavis]

Would you be open to screensharing (with something like screenhero) / a call this weekend to try to debug it?

[gwillie]

sorry for slow reply. sure can help, but this craptop runs debian so no screenhero. maybe something like showmypc.

better still you can recreate issue yourself (but if you cant recreate it, we'll screen share).

assuming you know a little about wordpress and have wamp/lamp:

1. setup blank mysql db. install latest wordpress 3.6
2. install advanced custom fields plugin
3. run selectize on all select elements
4. go to Custom Fields settings page in wordpress admin

will be around this weekend so i'll check back soon to see how it went