时间戳

首页 > 解决方案 > Django Select2Widget 没有用脆的形式正确地设置样式

django - Django Select2Widget 没有用脆的形式正确地设置样式

问题描述

我正在使用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 样式的问题，我无法弄清楚这个问题。任何帮助将不胜感激。

标签： djangodjango-crispy-formsdjango-select2

解决方案

对于那些正在寻找解决方案的人（尽管我认为这不是最好的），

您可以通过传递来解决布局问题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%'},
    ),
)

推荐阅读