0
227
ViewsCan't override checkbox style using crispy forms
While creating forms for my app I had to make a custom checkbox (I am terrible with css so this was not easy). I got it to work and it looks like this when I create the form manually:
The manual html is
<div class="checkbox icheck-primary">
{{ form.active }}
<label for="id_active">Active</label>
</div>
But when using the wrapper_class attribute on a crispy forms Field it displays as standard:
And the crispy forms code:
self.helper.layout = Layout(
Fieldset(
'Add Contact',
'first_name',
Field('active', wrapper_class='icheck-primary', css_class='icheck-primary')
))
I tried using a custom Div template but I couldn't get it to work. In the docs all I could find was the wrapper_class.
Am I missing something simple or could someone point me in the right direction?
[Edit]
HTML output from 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>
And here is my manual/forms generated html
<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>
[Edit 2] This is a sample of the css selectors
.radio > input[type="radio"]:first-child:checked + label::before,
.checkbox > input[type="checkbox"]:first-child:checked + label::before,
.radio > input[type="radio"]:first-child:checked + input[type="hidden"] + label::before,
.checkbox > input[type="checkbox"]:first-child:checked + input[type="hidden"] + label::before {
content: "\e013";
display: inline-block;
font-family: 'Glyphicons Halflings';
font-weight: normal;
font-size: 10px;
color: #b4aba1;
position: absolute;
width: 22px;
height: 22px;
line-height: 20px;
border: 2px solid #b4aba1;
border-radius: 0 !important;
background-color: #0060a1 !important;
text-align: center;
margin-left: -29px;
vertical-align: text-top;
}
2 answers
Answer question0
After some help in the comments from @dirn I went back and made a custom template.
Since all of my checkboxes should look this same I created a checkboxinput_template based on the existing crispy_forms templates:
{% 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>
I added the icheck-primary class to the surrounding div and moved the field itself out of the label tag. This allowed the selectors to work properly.
I think this could also be done by overriding the fields.html but for the moment this solves my problem.
This is probably not the best solution and I'd appreciate it if anyone could share a better one.
0
I have no experience with django-crispy-forms, but use django-widget-tweaks for adding css to django forms. You only need to adjust templates, no python code. Makes it a lot easier and you keep styling separate from code.