Skip to content

Commit ef3f3da

Browse files
jplaverdurejplaverdure
authored
Enabled use of custom-controls on checkbox inputs when show_form_labels is False (#25)
* Update field.html to enable the use of custom-controls on checkbox inputs when show_form_labels is False (#1) The current code prevents the display of checkboxes (single) as BS4 custom-controls if show_form_labels is False. This modification moves the control of the label display around the label block itself allowing the display of checkboxes as custom-control regardless of the value of show_form_labels.
1 parent be1cb8a commit ef3f3da

File tree

2 files changed

+33
-18
lines changed

2 files changed

+33
-18
lines changed

‎crispy_bootstrap4/templates/bootstrap4/field.html‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
{% endif %}
1212
<{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" class="{% if not field|is_checkbox %}form-group{% if 'form-horizontal' in form_class %} row{% endif %}{% else %}{%if use_custom_control%}{% if tag != 'td' %}custom-control {%endif%} custom-checkbox{% else %}form-check{% endif %}{% endif %}{% if wrapper_class %} {{ wrapper_class }}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
1313
{% if field.label and not field|is_checkbox and form_show_labels %}
14-
{# not field|is_radioselect in row below can be removed once Django 3.2 is no longer supported #}
14+
{# not field|is_radioselect in row below can be removed once Django 3.2 is no longer supported #}
1515
<label {% if field.id_for_label and not field|is_radioselect %}for="{{ field.id_for_label }}" {% endif %}class="{% if 'form-horizontal' in form_class %}col-form-label {% endif %}{{ label_class }}{% if field.field.required %} requiredField{% endif %}">
1616
{{ field.label }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
1717
</label>
@@ -26,8 +26,12 @@
2626
{% endif %}
2727

2828
{% if not field|is_checkboxselectmultiple and not field|is_radioselect %}
29-
{% if field|is_checkbox and form_show_labels %}
30-
{%if use_custom_control%}
29+
{% if field|is_checkbox %}
30+
{% if use_custom_control %}
31+
{% if tag == 'td' %}
32+
<div class="custom-control custom-checkbox">
33+
{% endif %}
34+
3135
{% if field.errors %}
3236
{% crispy_field field 'class' 'custom-control-input is-invalid' %}
3337
{% else %}
@@ -41,9 +45,16 @@
4145
{% endif %}
4246
{% endif %}
4347
<label for="{{ field.id_for_label }}" class="{%if use_custom_control%}custom-control-label{% else %}form-check-label{% endif %}{% if field.field.required %} requiredField{% endif %}">
44-
{{ field.label }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
48+
{% if form_show_labels %}
49+
{{ field.label }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
50+
{% else %}
51+
&nbsp;
52+
{% endif %}
4553
</label>
4654
{% include 'bootstrap4/layout/help_text_and_errors.html' %}
55+
{% if use_custom_control and tag == 'td' %}
56+
</div>
57+
{% endif %}
4758
{% elif field|is_file and use_custom_control %}
4859
{% include 'bootstrap4/layout/field_file.html' %}
4960
{% else %}
@@ -55,13 +66,13 @@
5566
{% crispy_field field 'class' 'custom-select' %}
5667
{% endif %}
5768
{% elif field|is_file %}
58-
{% if field.errors %}
69+
{% if field.errors %}
5970
{% crispy_field field 'class' 'form-control-file is-invalid' %}
6071
{% else %}
6172
{% crispy_field field 'class' 'form-control-file' %}
6273
{% endif %}
6374
{% else %}
64-
{% if field.errors %}
75+
{% if field.errors %}
6576
{% crispy_field field 'class' 'form-control is-invalid' %}
6677
{% else %}
6778
{% crispy_field field 'class' 'form-control' %}

‎tests/results/bootstrap4/test_layout/test_inline_formset_checkbox.html‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -21,35 +21,39 @@
2121
<tr class="d-none empty-form">
2222
<div class="form-group">
2323
<td id="div_id_form-__prefix__-box_one" class="custom-checkbox">
24-
<div>
25-
<input type="checkbox" name="form-__prefix__-box_one" class="checkboxinput form-control"
26-
id="id_form-__prefix__-box_one">
24+
<div class="custom-control custom-checkbox">
25+
<input type="checkbox" name="form-__prefix__-box_one" class="checkboxinput custom-control-input"
26+
id="id_form-__prefix__-box_one">
27+
<label for="id_form-__prefix__-box_one" class="custom-control-label requiredField">&nbsp;</label>
2728
</div>
2829
</td>
2930
</div>
3031
<div class="form-group">
3132
<td id="div_id_form-__prefix__-box_two" class="custom-checkbox">
32-
<div>
33-
<input type="checkbox" name="form-__prefix__-box_two" class="checkboxinput form-control"
34-
id="id_form-__prefix__-box_two">
33+
<div class="custom-control custom-checkbox">
34+
<input type="checkbox" name="form-__prefix__-box_two" class="checkboxinput custom-control-input"
35+
id="id_form-__prefix__-box_two">
36+
<label for="id_form-__prefix__-box_two" class="custom-control-label requiredField">&nbsp;</label>
3537
</div>
3638
</td>
3739
</div>
3840
</tr>
3941
<tr>
4042
<div class="form-group">
4143
<td id="div_id_form-0-box_one" class="custom-checkbox">
42-
<div>
43-
<input type="checkbox" name="form-0-box_one" class="checkboxinput form-control"
44-
id="id_form-0-box_one">
44+
<div class="custom-control custom-checkbox">
45+
<input type="checkbox" name="form-0-box_one" class="checkboxinput custom-control-input"
46+
id="id_form-0-box_one">
47+
<label for="id_form-0-box_one" class="custom-control-label requiredField">&nbsp;</label>
4548
</div>
4649
</td>
4750
</div>
4851
<div class="form-group">
4952
<td id="div_id_form-0-box_two" class="custom-checkbox">
50-
<div>
51-
<input type="checkbox" name="form-0-box_two" class="checkboxinput form-control"
52-
id="id_form-0-box_two">
53+
<div class="custom-control custom-checkbox">
54+
<input type="checkbox" name="form-0-box_two" class="checkboxinput custom-control-input"
55+
id="id_form-0-box_two">
56+
<label for="id_form-0-box_two" class="custom-control-label requiredField">&nbsp;</label>
5357
</div>
5458
</td>
5559
</div>

0 commit comments

Comments
 (0)