无法使用crispy表单覆盖复选框样式

时间:2017-04-10 12:11:31

标签: css django checkbox django-crispy-forms

在为我的应用创建表单时,我必须创建一个自定义复选框(我对css很糟糕所以这并不容易)。我让它工作,当我手动创建表单时它看起来像这样:

Styled checkbox

手册html

<div class="checkbox icheck-primary">
   {{ form.active }}
   <label for="id_active">Active</label>
</div>

但是当在脆弱的表单wrapper_class上使用Field属性时,它会显示为标准:

Non styled checkbox

crispy forms代码:

self.helper.layout = Layout(
        Fieldset(
            'Add Contact',
            'first_name',
            Field('active', wrapper_class='icheck-primary', css_class='icheck-primary')
        ))

我尝试使用自定义Div模板,但我无法使用它。在文档中我只能找到wrapper_class

我错过了一些简单的事情,还是有人指出了我正确的方向?

[编辑] 来自HTML的{​​{1}}输出:

crispy_forms

这是我的手册/表格生成<div id="div_id_active" class="checkbox icheck-primary"> <label for="id_active" class=""> <input name="active" class="checkboxinput" id="id_active" checked="" type="checkbox"> Active </label> </div>

html

[编辑2]这是<div class="checkbox icheck-primary"> <input name="stay_logged_in" class="checkbox icheck-primary" id="id_stay_logged_in" type="checkbox"> <label for="id_stay_logged_in">Remember me</label> </div>

的示例
css selectors

2 个答案:

答案 0 :(得分:1)

我没有使用django-crispy-forms的经验,但是使用django-widget-tweaks将dss添加到django表单中。你只需要调整模板,没有python代码。使样式更容易,并将样式与代码分开。

答案 1 :(得分:1)

在@dirn的评论中得到一些帮助之后,我回去做了一个自定义模板。

由于我的所有复选框都应该看起来一样,因此我根据现有的checkboxinput_template模板创建了crispy_forms

    {% load crispy_forms_field %}

    <div id="div_{{ field.auto_id }}" class="checkbox icheck-primary {% if form_show_errors and field.errors %} error{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
        {{ field }}
        <label class="control-label {{ label_class }}" for="id_{{ field.html_name }}">{{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}</label>
        <div class="controls {{ field_class }}">
            {% include 'bootstrap3/layout/help_text.html' %}
        </div>
    </div>

我将icheck-primary类添加到周围的div,并将字段本身移出label标签。这使得选择器能够正常工作。

我认为这也可以通过覆盖fields.html来完成,但目前这解决了我的问题。

这可能不是最佳解决方案,如果有人能分享更好的解决方案,我会感激不尽。