CheckboxSelectMultiple widget Django renders already collapsed in form

I am trying to create a form where you can enter the language or languages. I want to use a CheckboxSelectMultiple widget, but it renders already collapsed in the form:

The form with already collapsed select

How can I fix this?

forms.py:

class TweetForm(forms.ModelForm):
class Meta:
    model = TweetSearch
    fields = ['search_term', 'query_type', 'start_date', 'end_date', 'language', 'country', 'tweet_count']
    widgets = {
        'search_term': forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'Search...'}),
        'query_type': forms.Select(attrs={'class': 'form-control'}),
        'tweet_count': forms.NumberInput(attrs={'class': 'form-control', 'placeholder': 'Number of tweets'}),
        'start_date': DateTimePickerInput(attrs={'class': 'form-control', 'placeholder': 'From'}),
        'end_date': DateTimePickerInput(attrs={'class': 'form-control', 'placeholder': 'Till'}),
        'language': forms.CheckboxSelectMultiple(attrs={'class':'form-control'})
    }

html:

<div id="searchcontainer">
<div class="card w-50 text-center mx-auto mt-8" id="searchcard">
    <div class="card-header">
        Search
    </div>
    <div class="card-body">
        <h5 class="card-title">Search for tweets</h5>
        <form action="" method="POST">
            {% csrf_token %}
            <div class="form-row">
                <div class="form-group col-md-4">
                    {{form.search_term}}
                </div>
                <div class="form-group col-md-4">
                    {{form.query_type}}
                </div>
                <div class="form-group col-md-4">
                    {{form.tweet_count}}
                </div>
            </div>

            <div class="form-row">
                <div class="form-group col-md-6">
                    {{form.start_date}}
                </div>
                <div class="form-group col-md-6">
                    {{form.end_date}}
                </div>
            </div>

            <div class="form-row">
                    {{form.language}}
            </div>
            <input class="btn btn-primary mb-2" type="submit">
        </form>
    </div>
</div>
Back to Top