# Django Forms: Django-select2 Not rendering multi select box correctly

**URL:** <https://forum.djangoproject.com/t/django-forms-django-select2-not-rendering-multi-select-box-correctly/19338>\
**Category:** Forms & APIs\
**Created:** [March 7, 2023, 3:26pm UTC](https://forum.djangoproject.com/t/django-forms-django-select2-not-rendering-multi-select-box-correctly/19338 "2023-03-07T15:26:20Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![dmc200](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/dmc200/32/12563_2.png) [@dmc200](https://forum.djangoproject.com/u/dmc200)\
**Post date:** [March 7, 2023, 3:26pm UTC](https://forum.djangoproject.com/t/django-forms-django-select2-not-rendering-multi-select-box-correctly/19338/1 "2023-03-07T15:26:20Z")

</div>

Im using django-select2 : [Django-Select2 — Django-Select2 8.4.4.dev5+gaeeded2a2 documentation](https://django-select2.readthedocs.io/en/latest/index.html)

Im attempting to create a multiple tag select dropdown box similar to this:

 ![](https://us1.discourse-cdn.com/flex026/uploads/djangoproject/original/2X/5/53e4d05deaf7a4e4b0e9351e683059e391595c06.png)  
The problem is its not loading as expected and is like this:

 ![](https://us1.discourse-cdn.com/flex026/uploads/djangoproject/original/2X/e/e2a2372e90298100e9f43f29db9fe63298a62a63.png)  
Below is my code. Im using the `Select2TagWidget` currently but I have tried the following other widgets:

```auto
ModelSelect2MultipleWidget
Select2MultipleWidget

```

# forms.py

```auto
class BankForm(ModelForm):
     required_css_class = "required"
     formField1 = forms.ModelMultipleChoiceField(
       queryset=Bank.objects.all(),
       label="Lead Bank",
       widget=Select2TagWidget,
)

class Meta:
model = AdditionalBank
fields = [
"formField1",
]

""" Labels for the fields we didn't override """
labels = {}

```

# urls.py

Ive added the correct path to my urls.py file

`path("select2/", include("django_select2.urls")),`

I have the redis queue setup correctly in my `settings.py` file. Im pretty confident the rest of the configuration is setup correctly outlined in the docs for django-select2

My Front end form is rendering this html/css:

```auto
<select name="lead\_bank" lang="None" data-minimum-input-length="1" data-theme="default" data-allow-clear="false" data-tags="true" data-token-separators="\[\&quot;,\&quot;, \&quot; \&quot;\]" required="" id="id\_lead\_bank" class="django-select2" multiple="">

<option value="1">Citi</option>

<option value="2" selected="">USBank</option>

<option value="3">Wells Fargo</option>

<option value="4" selected="">NY Bank</option>

</select> 

```

Keep in mind I am very new to front end dev. Primarily a backend dev.

Thank you in advance !

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [March 7, 2023, 3:29pm UTC](https://forum.djangoproject.com/t/django-forms-django-select2-not-rendering-multi-select-box-correctly/19338/2 "2023-03-07T15:29:10Z")

</div>

That type of “enhanced widget” is something handled within the browser.

In the `Add note` example at the top, what JavaScript / CSS libraries were used to create those effects?

If that’s how you want the box to appear, that’s what you need to replicate. Also see [API Documentation — Django-Select2 8.0.1.dev16+g81c9b25 documentation](https://django-select2.readthedocs.io/en/latest/django_select2.html#javascript)

---

<div class="post-metadata">

**Author:** ![dmc200](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/dmc200/32/12563_2.png) [@dmc200](https://forum.djangoproject.com/u/dmc200)\
**Post date:** [March 7, 2023, 3:58pm UTC](https://forum.djangoproject.com/t/django-forms-django-select2-not-rendering-multi-select-box-correctly/19338/3 "2023-03-07T15:58:58Z")

</div>

Hey @KenWhitesell. Unfortunately I dont know what javascript or css libraries are being used to render that form. I just pulled it from a google search images of a “Multi Select tag Form”

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [March 7, 2023, 4:04pm UTC](https://forum.djangoproject.com/t/django-forms-django-select2-not-rendering-multi-select-box-correctly/19338/4 "2023-03-07T16:04:12Z")

</div>

In that case, you may want to redo your search, but look for the JavaScript libraries that create that type of widget.

---

<div class="post-metadata">

**Author:** ![mast3rbow](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/mast3rbow/32/7124_2.png) [@mast3rbow](https://forum.djangoproject.com/u/mast3rbow)\
**Post date:** [March 11, 2023, 6:52am UTC](https://forum.djangoproject.com/t/django-forms-django-select2-not-rendering-multi-select-box-correctly/19338/5 "2023-03-11T06:52:24Z")

</div>

Have you included the {{form.meida}} tag in your template? Last time I used the Select2Widget. The documentation was missing instructions to include it. This loads the CSS and JSS the widget uses in your frontend.