I have come across the ‘Select2’ plugin (a wonderful, widely used jQuery replacement for select boxes with autocomplete).
I am testing it with simple static data, but I cannot make it work inside a Webflow form (I place it there as an HTML embed).
On the contrary, outside Weblflow, it works great.
What it happens is that HTML select code behaves like a normal listbox, without picking up the Jquery functionalities at all, within Webflow.
And of course I have placed in the bottom of the page the Jquery code to instantiate it:
I cannot identify which conflict does not make it work within Webflow.
I also saved the published Webflow page as HTML to make some experiments: I have tried to use the Jquery version of Webflow, or the JQuery version suggested by Select2, or BOTH. Again, it does not work.
On the contrary, if I do these same 3 tests in a simple non Webflow HTML page, it works regardless of the Jquery versions.
Can someone kindly help me… PLEASE?
I include a read only link to my simple testing page.
THANK YOU SO MUCH JEFF!!
Life-saving tip for me - I was really stuck with this page!
Jeff, just for me to understand: once I removed the 1.x ancient JQuery, why was it necessary, to make it work, to move the select2.min.js from the header to the bottom where you said?
Wasn’t select2.min.js equally available to be called and used by the combo, even if left in the page header? What am I missing?
The script has a dependency upon jQuery which is loaded in the before body close area. Any code that depends on jQuery currently needs to be loaded there since JavaScript is executed top down.
Most likely there was a collision of the two jQuery versions because of namespace. No point in debugging that.
In the future we can hope that Webflow chooses to load jQuery in the head with a defer method. Would save lots of grief.
Am very happy with the Select2 plugin.
I am left with only one thing to resolve: when I click the down arrow, all the elements are centered (which is quite messy), instead of being left-aligned.
Like here: https://cs3.webflow.io/select2-test
Again, outside Webflow this does not happen.
I have tried many things, both using Select2 on embedded elements.
I have also aligned the parent’s container text to left - no result.
There is something in webflow which causes this, but I am unable to understand what.
You’ve applied a class to the Body element (.body) and this is making everything centered on the page:
I’d recommend removing this class (or the text-align style) and instead applying the text-align: center property only to element parents that require centering
Mike, just for me to understand:
I had set ALL the combo’s parents’ containers to text-align: left (from the direct DIV parent, to the containing form, and others going up), with no effect.
Why was the Body’s text-align: center prevailing? Shouldn’t the direct parent’s DIV containers’ alignment settings prevail?
I’m not too sure why the styles weren’t being inherited since I’m not familiar with the plugin or how it’s creating the styles for the dropdown but it’s possible that it was looking higher up in the stack—the forms parent container (for example) is still grabbing it’s styles from the .body class:
Instead of overwriting the styles on each of the individual form elements, it’s much easier to make sure that the form parent wrapper is set to text-align: left so all elements inside inherit the styles from a single rule.
In the example below, I removed the alignment properties from the field dropdown, its wrapper, the form element, and the form block—instead only putting it on the .m_DIV_MAIN_SUBBOTTOM class which is the parent element of all of those classes—and now you can see the dropdown class (the deepest child) is inheriting the style as expected from the parent:
CSS inheritance is very important to consider as it can simplify styling nested elements and prevents the need to manage lots of specific styles across many elements in your project