在为我的应用创建表单时,我必须创建一个自定义复选框(我对css很糟糕所以这并不容易)。我让它工作,当我手动创建表单时它看起来像这样:
手册html
是
<div class="checkbox icheck-primary">
{{ form.active }}
<label for="id_active">Active</label>
</div>
但是当在脆弱的表单wrapper_class
上使用Field
属性时,它会显示为标准:
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
答案 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
来完成,但目前这解决了我的问题。
这可能不是最佳解决方案,如果有人能分享更好的解决方案,我会感激不尽。