Django-autocomplete-light: How to set class of select2 form

[rg3l3dr]

DAL is working great in my project, thanks for making such an amazing app. Problem is it's not looking great and I can't figure out how to set the form class properly.

I would like to set the form class to bootstrap 'form-control input-lg'

Changing the class in the template just renders a the DAL form within the bootstrap form, even if I drop the form group and just use a single form tag.

Cannot figure out how to set in the forms.py with the data attributes, setting class = 'class name' here has not effect.

Forms.py

class CreatePartForm(forms.ModelForm):
    part = forms.ModelChoiceField(
        queryset=Design.objects.all(),
        widget=autocomplete.ModelSelect2(url='PartsAutocomplete',attrs={
            'data-placeholder': 'Add a part to your BOM',
            })
    )
    class Meta:
        model = Design
        fields = ('part',)

    def __init__(self, *args, **kwargs):
        super(CreatePartForm, self).__init__(*args, **kwargs)
        self.fields['part'].label = ''

Template.html

    <form class='form'  method='POST' action='#'>
        <div class='form-group'>
            {% csrf_token %}
            {{ PartForm|crispy }}
        </div>
        <button type='submit' class='btn btn-success btn-lg' value='part'>
            Add Part
        </button>
    </form>

[ikcam]

I don't know if this could help you but I overwrite some of the CSS classes to make it look better with bootstrap.

/* dal bootstrap css fix */
.select2-container {
    width: 100% !important;
    min-width: 10em !important;
}
/* django-addanother bootstrap css fix */
.related-widget-wrapper{
    padding-right: 16px;
    position: relative;
}
.related-widget-wrapper-link{
    position: absolute;
    top: 3px;
    right: 0px;
}`

[jpic]

Awesome !

Would it be relevant to contribute this upstream to select2 ?

[rg3l3dr]

Thanks, that did help it be more responsive, but the main problem was getting the height and font size of the form to match the bootstrap button next to it. I ended up adding the code below, a bit of a hack but it is working for now.

span.select2-selection.select2-selection--single {
        height: 33px;
    }

span.select2-selection__placeholder {
        font-size: 16px;
    }

[jpic]

Thanks for your feedback !! Is there a PR upstream open for that ?

:guitar:

[rodgomesc]

I don't know if this could help you but I overwrite some of the CSS classes to make it look better with bootstrap.

/* dal bootstrap css fix */
.select2-container {
    width: 100% !important;
    min-width: 10em !important;
}
/* django-addanother bootstrap css fix */
.related-widget-wrapper{
    padding-right: 16px;
    position: relative;
}
.related-widget-wrapper-link{
    position: absolute;
    top: 3px;
    right: 0px;
}`

saved my life in 2 years later, after 3 hours on google

[josylad]

I don't know if this could help you but I overwrite some of the CSS classes to make it look better with bootstrap.

/* dal bootstrap css fix */
.select2-container {
    width: 100% !important;
    min-width: 10em !important;
}
/* django-addanother bootstrap css fix */
.related-widget-wrapper{
    padding-right: 16px;
    position: relative;
}
.related-widget-wrapper-link{
    position: absolute;
    top: 3px;
    right: 0px;
}`

This helped, but I also added some custom Styling to make the fields look good and responsive.

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 100% !important;
}

.select2-container .select2-selection--single {
  height: 40px !important;
}

.select2-container .select2-selection--multiple {

  min-height: 45px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {

  height: 100% !important;
}
.select2-container .select2-selection--multiple .select2-selection__rendered {
  overflow: auto !important;

}