3

I'm using the django-select2 package to implement Searchable Select on a ForeignKey field. I was successful in getting the functionality to work by following the steps mentioned in the docs but I am having trouble with the styling.

To render my form I use crispy-forms. All the other widgets get rendered properly except the Select2Widget.

enter image description here

As can be seen in the above image, the height and width of the form element is not dynamic like other elements.

HTML code generated:

<div class=""> <select name="current_user" data-minimum-input-length="0" data-allow-clear="true" data-placeholder=""
        class="select2widget form-control django-select2" required id="id_current_user">
        <option value=""></option>
        <option value="">---------</option>
        <option value="4" selected>Arpita</option>

    </select> </div>
</div>
<div id="div_id_device_admin" class="form-group"> <label for="id_device_admin" class=" requiredField">
        Device admin<span class="asteriskField">*</span> </label>
    <div class=""> <select name="device_admin" data-minimum-input-length="0" data-allow-clear="true" data-placeholder=""
            class="select2widget form-control django-select2" required id="id_device_admin">
            <option value=""></option>
            <option value="">---------</option>
            <option value="4" selected>Arpita</option>

        </select> </div>
</div>

This is how I set the widget in ModelForm. 

def __init__(self, *args, in_org, **kwargs):
       ...
        self.fields['current_user'].widget = Select2Widget()
        self.fields['current_user'].queryset = in_org.user_set.all()

I feel this is mostly an issue with CSS styling and I am unable to figure out the issue. Any help would be greatly appreciated.

rks
  • 542
  • 1
  • 3
  • 13

1 Answers1

1

For those who are looking for a solution (though I think it's not the best),

you can fix the layout issue by passing attrs={'data-width': '100%'}

e.g.

self.fields['current_user'].widget = Select2Widget(attrs={'data-width': '100%'})

or

current_user = forms.ChoiceField(
    widget=ModelSelect2Widget(
        model=User,
        search_fields=['username__istartswith'],
        attrs={'data-width': '100%'},
    ),
)
yujinyuz
  • 84
  • 1
  • 5