Select2 JQuery plugin not working inside Webflow... help please!

Hello,

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.

I have of course placed in the of the Webflow page the required links to include select2.min.js and select2.min.css (as explained here: Installation | Select2 - The jQuery replacement for select boxes).

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. Mauro


Here is my site Read-Only: https://preview.webflow.com/preview/cs3?utm_medium=preview_link&utm_source=designer&utm_content=cs3&preview=564002b3fd894da3806e9ec0d109e127&pageId=6017d975c307b457e34d41ef&mode=preview

Lets start by not loading jQuery again. It is already loaded by Webflow. So remove the call to the ancient 1,x version from the head.

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

Then take this script and move it to the “before body close”

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

Above this script which has the dependency.

      $(document).ready(function() {
        $("#cmbCities").select2();
      });
    </script>

Now the page can be tested and further debugged as needed.

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?

Cheers, Mauro

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.

Hello again,

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.

My read only link: https://preview.webflow.com/preview/cs3?utm_medium=preview_link&utm_source=designer&utm_content=cs3&preview=564002b3fd894da3806e9ec0d109e127&pageId=6017d975c307b457e34d41ef&mode=preview

Any help would be appreciated.

Cheers

You’ve applied a class to the Body element (.body) and this is making everything centered on the page:

image

image

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 :+1:

You are right Mike, it works!!

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?

Cheers and thanks so much again.

1 Like

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 :wink:

Super!
Thank you Mike for taking the time to explain it to me - sincerely appreciated!
M :pray:

1 Like

could you share a read only link to see how you did it? I’m trying to implement something similar without much success.
Thanks