Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update field.html to enable the use of custom-controls on checkbox inputs when show_form_labels is False #25

Merged
merged 4 commits into from
Feb 25, 2024
Merged

Update field.html to enable the use of custom-controls on checkbox inputs when show_form_labels is False #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b29499d
Update field.html to enable the use of custom-controls on checkbox in…
jplaverdure Jan 9, 2024
470353b
Update test_inline_formset_checkbox.html
jplaverdure Jan 10, 2024
50a84a2
Update test_inline_formset_checkbox.html
jplaverdure Jan 17, 2024
025ccf3
Fixes display issue tied with absence of <label> when using custom-ch…
jplaverdure Feb 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 17 additions & 6 deletions crispy_bootstrap4/templates/bootstrap4/field.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
{% endif %}
<{% 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 %}">
{% if field.label and not field|is_checkbox and form_show_labels %}
{# not field|is_radioselect in row below can be removed once Django 3.2 is no longer supported #}
{# not field|is_radioselect in row below can be removed once Django 3.2 is no longer supported #}
<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 %}">
{{ field.label }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
</label>
Expand All @@ -26,8 +26,12 @@
{% endif %}

{% if not field|is_checkboxselectmultiple and not field|is_radioselect %}
{% if field|is_checkbox and form_show_labels %}
{%if use_custom_control%}
{% if field|is_checkbox %}
{% if use_custom_control %}
{% if tag == 'td' %}
<div class="custom-control custom-checkbox">
{% endif %}

{% if field.errors %}
{% crispy_field field 'class' 'custom-control-input is-invalid' %}
{% else %}
Expand All @@ -41,9 +45,16 @@
{% endif %}
{% endif %}
<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 %}">
{{ field.label }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
{% if form_show_labels %}
{{ field.label }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
{% else %}
&nbsp;
{% endif %}
</label>
{% include 'bootstrap4/layout/help_text_and_errors.html' %}
{% if use_custom_control and tag == 'td' %}
</div>
{% endif %}
{% elif field|is_file and use_custom_control %}
{% include 'bootstrap4/layout/field_file.html' %}
{% else %}
Expand All @@ -55,13 +66,13 @@
{% crispy_field field 'class' 'custom-select' %}
{% endif %}
{% elif field|is_file %}
{% if field.errors %}
{% if field.errors %}
{% crispy_field field 'class' 'form-control-file is-invalid' %}
{% else %}
{% crispy_field field 'class' 'form-control-file' %}
{% endif %}
{% else %}
{% if field.errors %}
{% if field.errors %}
{% crispy_field field 'class' 'form-control is-invalid' %}
{% else %}
{% crispy_field field 'class' 'form-control' %}
Expand Down
28 changes: 16 additions & 12 deletions tests/results/bootstrap4/test_layout/test_inline_formset_checkbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,35 +21,39 @@
<tr class="d-none empty-form">
<div class="form-group">
<td id="div_id_form-__prefix__-box_one" class="custom-checkbox">
<div>
<input type="checkbox" name="form-__prefix__-box_one" class="checkboxinput form-control"
id="id_form-__prefix__-box_one">
<div class="custom-control custom-checkbox">
<input type="checkbox" name="form-__prefix__-box_one" class="checkboxinput custom-control-input"
id="id_form-__prefix__-box_one">
<label for="id_form-__prefix__-box_one" class="custom-control-label requiredField">&nbsp;</label>
</div>
</td>
</div>
<div class="form-group">
<td id="div_id_form-__prefix__-box_two" class="custom-checkbox">
<div>
<input type="checkbox" name="form-__prefix__-box_two" class="checkboxinput form-control"
id="id_form-__prefix__-box_two">
<div class="custom-control custom-checkbox">
<input type="checkbox" name="form-__prefix__-box_two" class="checkboxinput custom-control-input"
id="id_form-__prefix__-box_two">
<label for="id_form-__prefix__-box_two" class="custom-control-label requiredField">&nbsp;</label>
</div>
</td>
</div>
</tr>
<tr>
<div class="form-group">
<td id="div_id_form-0-box_one" class="custom-checkbox">
<div>
<input type="checkbox" name="form-0-box_one" class="checkboxinput form-control"
id="id_form-0-box_one">
<div class="custom-control custom-checkbox">
<input type="checkbox" name="form-0-box_one" class="checkboxinput custom-control-input"
id="id_form-0-box_one">
<label for="id_form-0-box_one" class="custom-control-label requiredField">&nbsp;</label>
</div>
</td>
</div>
<div class="form-group">
<td id="div_id_form-0-box_two" class="custom-checkbox">
<div>
<input type="checkbox" name="form-0-box_two" class="checkboxinput form-control"
id="id_form-0-box_two">
<div class="custom-control custom-checkbox">
<input type="checkbox" name="form-0-box_two" class="checkboxinput custom-control-input"
id="id_form-0-box_two">
<label for="id_form-0-box_two" class="custom-control-label requiredField">&nbsp;</label>
</div>
</td>
</div>
Expand Down
Loading