1

I'm having a problem getting the Django-Select2 Bootstrap5 theme working. The select2 element is displaying the correct field from the DB, and my search function works correctly, it's just the theme aspect that's the problem.

select2_init.js

$(document).ready(function () {
    $('#id_school').select2({
        theme: 'bootstrap-5',
    });
});

base.html

{% load static %}
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}{% endblock %}</title>
    {% block css %}
        <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}" type="text/css">
        <link rel="stylesheet" href="{% static 'css/custom.css' %}" type="text/css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css"/>
        <link rel="stylesheet"
              href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css"/>
    {% endblock %}

</head>
<body>

{#TODO: Messages#}
<div class="container flex-fill pt-5">
    {% block content %}

    {% endblock %}
</div>
<div class="container">
    <footer class="d-flex justify-content-between mt-3 my-4 border-top">
        <p>© 2023 Company</p>
    </footer>
</div>
{% block js %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js"
            integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js"
            integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ"
            crossorigin="anonymous"></script>
    <script src="{% static 'js/select2_init.js' %}"></script>
{% endblock %}
</body>
</html>

register.html

{% extends 'base.html' %}
{% load static %}
{% block css %}
    {{ block.super }}
    {{ form.media.css }}
{% endblock %}

{% block title %}
    Maths Root: Register
{% endblock %}

{% block content %}
    <h1>Create an account</h1>
    <p>Please use the form below to register.</p>
    <form method="post">
        {% csrf_token %}

        {# additional fields omitted for brevity #}

        <div class="d-flex justify-content-between mb-3">
            <div class="flex-fill form-floating">
                {{ form.school }}
                {% if form.school.errors %}
                    {% for error in form.school.errors %}
                        <div class="text-danger-emphasis">{{ error }}</div>
                    {% endfor %}
                {% endif %}
            </div>
        </div>

        {# additional fields omitted for brevity #}

        <div class="mt-3">
            <button class="btn btn-outline-primary" type="submit">Create Account</button>
        </div>
    </form>
{% endblock %}

{% block js %}
    {{ block.super }}
    {{ form.media.js }}
{% endblock %}

models.py

class CustomUser(AbstractUser):
    """
    Custom user model with email as username field
    Additional fields: school, job_title, mobile_phone_number
    """
    email = models.EmailField(unique=True)
    school = models.ForeignKey(School,
                               on_delete=models.CASCADE,
                               related_name='users',
                               blank=True,
                               null=True)
    job_title = models.CharField(max_length=250, blank=True, null=True)
    mobile_phone_number = models.CharField(max_length=30, blank=True, null=True, validators=[validate_phone_number])

forms.py

class UserRegistrationForm(forms.ModelForm):
    password = forms.CharField(label='Password',
                               widget=forms.PasswordInput)
    password2 = forms.CharField(label='Confirm password',
                                widget=forms.PasswordInput)
    school = forms.ModelChoiceField(queryset=School.objects.all(),
                                    widget=SchoolSelect2Widget(
                                        attrs={'class': 'form-select select2', 'data-placeholder': 'Select a school'}),
                                    required=True
                                    )

    class Meta:
        model = CustomUser
        fields = ['username', 'first_name', 'last_name', 'email',
                  'school', 'job_title', 'mobile_phone_number']

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        for field in self.fields.values():
            if field.widget.attrs.get('class') != 'form-select select2':
                field.widget.attrs.update({'class': 'form-control',
                                           'placeholder': field.label})

Currently the registration form looks like this

Any help pointers on how to get the field to apply the Bootstrap 5 theme would be very much appreciated.

David L
  • 11
  • 1

0 Answers0