Idea: Make Bootstrap Compatible

There’s this theme https://github.com/select2/select2-bootstrap-theme

But currently not compatible with django-autocomplete-light even if I add the theme manually since I can’t apply it to the Widgets (constructor doestn’t recognize theme param) nor do I know how to apply it as the Select2 default theme after the Select2 script is added but before the select2() function is called.

[ghost]

@carlos22 thanks for this tip. finally got this working. Although slightly different implementation (see below). Also, for anyone else driven crazy by the height of the select box open your select2-bootstrap4.css file, and add min-height to class: .select2-container–bootstrap4 .select2-selection { min-height: 40px; }

class NewPostForm(forms.ModelForm): target = forms.ModelChoiceField( queryset=Celebrities.objects.all(), widget=autocomplete.ModelSelect2() )

class Meta:
    model = Post
    fields = ['target', 'content']

def __init__(self, *args, **kwargs):
    super(NewPostForm, self).__init__(*args, **kwargs)
    self.fields['target'].widget.attrs = {
        'data-theme': 'bootstrap4',
    }

[carlos22]

This works for me (using bootstrap 4 theme from https://github.com/berkan52/select2-bootstrap4-theme)

$(document).one('autocompleteLightInitialize', '[data-autocomplete-light-function=select2]', function() {
    $.fn.select2.defaults.set( "theme", "bootstrap4" );
});

Just add anywhere in your js (after jquery is loaded).

Oh and make sure the css file is loaded AFTER the select2.css bundeled with this package. E.g.

<link rel="stylesheet" href="{% static "assets/select2-bootstrap4.css" %}" />
</body>