Django Select2Widget 无法使用脆皮形式正确设置样式

Question

我正在使用 django-select2在 ForeignKey 字段上实现 Searchable Select 的包。 我按照文档中提到的步骤成功地使功能正常工作，但我在样式方面遇到了问题。

为了呈现我的表单，我使用了 crispy-forms。除 Select2Widget 外，所有其他小部件均已正确呈现。

从上图中可以看出，表单元素的高度和宽度不像其他元素那样是动态的。

生成的 HTML 代码:

<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>

这就是我在 ModelForm 中设置小部件的方式。

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

我觉得这主要是 CSS 样式的问题，我无法找出问题所在。任何帮助将不胜感激。

Answer 1

对于那些正在寻找解决方案的人(虽然我认为这不是最好的)，

您可以通过传递 attrs={'data-width': '100%'} 来解决布局问题

例如

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

或

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