Skip to content

Commit 41746e4

Browse files
smithdc1sjkingo
smithdc1
and
sjkingo
authored
Fix checkbox table layout (django-crispy-forms#56)
* Fix layout of checkbox by adding correct css classes Co-authored-by: Sam Kingston <[email protected]>
1 parent 30b80b3 commit 41746e4

File tree

6 files changed

+339
-3
lines changed

6 files changed

+339
-3
lines changed

‎crispy_bootstrap5/templates/bootstrap5/field.html

+7-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<div class="{% for offset in bootstrap_checkbox_offsets %}{{ offset|slice:"7:14" }}{{ offset|slice:"4:7" }}{{ offset|slice:"14:16" }} {% endfor %}{{ field_class }}">
1010
{% endif %}
1111
{% endif %}
12-
<{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" class="{% if not field|is_checkbox %}mb-3{% if 'form-horizontal' in form_class %} row{% endif %}{% else %}form-check{% endif %}{% if wrapper_class %} {{ wrapper_class }}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
12+
<{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" class="mb-3{% if 'form-horizontal' in form_class %} row{% 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 %}
1414
<label {% if field.id_for_label %}for="{{ field.id_for_label }}"{% endif %} class="{% if 'form-horizontal' in form_class %}col-form-label{% else %}form-label{% endif %}{% if label_class %} {{ label_class }}{% endif %}{% if field.field.required %} requiredField{% endif %}">
1515
{{ field.label }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
@@ -45,6 +45,12 @@
4545
{% else %}
4646
{% crispy_field field 'class' 'form-select' %}
4747
{% endif %}
48+
{% elif field|is_checkbox %}
49+
{% if field.errors %}
50+
{% crispy_field field 'class' 'form-check-input is-invalid' %}
51+
{% else %}
52+
{% crispy_field field 'class' 'form-check-input' %}
53+
{% endif %}
4854
{% elif field.errors %}
4955
{% crispy_field field 'class' 'form-control is-invalid' %}
5056
{% else %}

‎test.html

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
9+
</head>
10+
<body>
11+
12+
13+
<form method="post">
14+
<div><input id="id_form-TOTAL_FORMS" name="form-TOTAL_FORMS" type="hidden" value="1"><input
15+
id="id_form-INITIAL_FORMS" name="form-INITIAL_FORMS" type="hidden" value="0"><input
16+
id="id_form-MIN_NUM_FORMS" name="form-MIN_NUM_FORMS" type="hidden"><input id="id_form-MAX_NUM_FORMS"
17+
name="form-MAX_NUM_FORMS" type="hidden"></div>
18+
<table class="table table-sm table-striped">
19+
<thead>
20+
<tr>
21+
<th class=" col-form-label" for="id_form-0-is_company">company</th>
22+
<th class="col-form-label requiredField" for="id_form-0-email">email<span class="asteriskField">*</span>
23+
</th>
24+
<th class="col-form-label requiredField" for="id_form-0-password1">password<span
25+
class="asteriskField">*</span></th>
26+
<th class="col-form-label requiredField" for="id_form-0-password2">re-enter password<span
27+
class="asteriskField">*</span></th>
28+
<th class="col-form-label requiredField" for="id_form-0-first_name">first name<span
29+
class="asteriskField">*</span></th>
30+
<th class="col-form-label requiredField" for="id_form-0-last_name">last name<span
31+
class="asteriskField">*</span></th>
32+
<th class="col-form-label requiredField" for="id_form-0-datetime_field">date time<span
33+
class="asteriskField">*</span></th>
34+
</tr>
35+
</thead>
36+
<tbody>
37+
<tr class="d-none empty-form">
38+
<div class="mb-3">
39+
<td class="mb-3" id="div_id_form-__prefix__-is_company"><input
40+
class="checkboxinput form-check-input" id="id_form-__prefix__-is_company"
41+
name="form-__prefix__-is_company" type="checkbox"></td>
42+
</div>
43+
<td class="mb-3" id="div_id_form-__prefix__-email"><input
44+
class="form-control inputtext textInput textinput" id="id_form-__prefix__-email" maxlength="30"
45+
name="form-__prefix__-email" type="text"><small class="form-text text-muted"
46+
id="hint_id_form-__prefix__-email">Insert your email</small></td>
47+
<td class="mb-3" id="div_id_form-__prefix__-password1"><input class="form-control textInput textinput"
48+
id="id_form-__prefix__-password1" maxlength="30" name="form-__prefix__-password1"
49+
type="password"></td>
50+
<td class="mb-3" id="div_id_form-__prefix__-password2"><input class="form-control textInput textinput"
51+
id="id_form-__prefix__-password2" maxlength="30" name="form-__prefix__-password2"
52+
type="password"></td>
53+
<td class="mb-3" id="div_id_form-__prefix__-first_name"><input
54+
class="form-control inputtext textInput textinput" id="id_form-__prefix__-first_name"
55+
maxlength="5" name="form-__prefix__-first_name" type="text"></td>
56+
<td class="mb-3" id="div_id_form-__prefix__-last_name"><input
57+
class="form-control inputtext textInput textinput" id="id_form-__prefix__-last_name"
58+
maxlength="5" name="form-__prefix__-last_name" type="text"></td>
59+
<td class="mb-3" id="div_id_form-__prefix__-datetime_field"><input class="dateinput form-control"
60+
id="id_form-__prefix__-datetime_field_0" name="form-__prefix__-datetime_field_0"
61+
type="text"><input class="form-control timeinput" id="id_form-__prefix__-datetime_field_1"
62+
name="form-__prefix__-datetime_field_1" type="text"></td>
63+
</tr>
64+
<div class="alert alert-block alert-danger">
65+
<ul class="m-0">
66+
<li>Passwords dont match</li>
67+
</ul>
68+
</div>
69+
<tr>
70+
<div class="mb-3">
71+
<td class="mb-3" id="div_id_form-0-is_company"><input class="checkboxinput form-check-input"
72+
id="id_form-0-is_company" name="form-0-is_company" type="checkbox"></td>
73+
</div>
74+
<td class="mb-3" id="div_id_form-0-email"><input
75+
class="form-control inputtext is-invalid textInput textinput" id="id_form-0-email"
76+
maxlength="30" name="form-0-email" type="text"><span class="invalid-feedback"
77+
id="error_1_id_form-0-email"><strong>This field is required.</strong></span><small
78+
class="form-text text-muted" id="hint_id_form-0-email">Insert your email</small></td>
79+
<td class="mb-3" id="div_id_form-0-password1"><input class="form-control is-invalid textInput textinput"
80+
id="id_form-0-password1" maxlength="30" name="form-0-password1" type="password"><span
81+
class="invalid-feedback" id="error_1_id_form-0-password1"><strong>This field is
82+
required.</strong></span></td>
83+
<td class="mb-3" id="div_id_form-0-password2"><input class="form-control is-invalid textInput textinput"
84+
id="id_form-0-password2" maxlength="30" name="form-0-password2" type="password"><span
85+
class="invalid-feedback" id="error_1_id_form-0-password2"><strong>This field is
86+
required.</strong></span></td>
87+
<td class="mb-3" id="div_id_form-0-first_name"><input
88+
class="form-control inputtext is-invalid textInput textinput" id="id_form-0-first_name"
89+
maxlength="5" name="form-0-first_name" type="text"><span class="invalid-feedback"
90+
id="error_1_id_form-0-first_name"><strong>This field is required.</strong></span></td>
91+
<td class="mb-3" id="div_id_form-0-last_name"><input
92+
class="form-control inputtext is-invalid textInput textinput" id="id_form-0-last_name"
93+
maxlength="5" name="form-0-last_name" type="text"><span class="invalid-feedback"
94+
id="error_1_id_form-0-last_name"><strong>This field is required.</strong></span></td>
95+
<td class="mb-3" id="div_id_form-0-datetime_field"><input class="dateinput form-control is-invalid"
96+
id="id_form-0-datetime_field_0" name="form-0-datetime_field_0" type="text"><input
97+
class="form-control is-invalid timeinput" id="id_form-0-datetime_field_1"
98+
name="form-0-datetime_field_1" type="text"><span class="invalid-feedback"
99+
id="error_1_id_form-0-datetime_field"><strong>This field is required.</strong></span></td>
100+
</tr>
101+
</tbody>
102+
</table>
103+
</form>
104+
105+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
106+
107+
</body>
108+
</html>

‎tests/results/single_checkbox.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<form method="post">
22
<div class="mb-3">
3-
<div id="div_id_single_checkbox" class="form-check">
3+
<div id="div_id_single_checkbox" class="mb-3">
44
<input
55
type="checkbox"
66
name="single_checkbox"

‎tests/results/test_tabular_formset_layout.html

+111
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<form method="post">
2+
<div> <input type="hidden" name="form-TOTAL_FORMS" value="3" id="id_form-TOTAL_FORMS"> <input type="hidden"
3+
name="form-INITIAL_FORMS" value="0" id="id_form-INITIAL_FORMS"> <input type="hidden" name="form-MIN_NUM_FORMS"
4+
value="0" id="id_form-MIN_NUM_FORMS"> <input type="hidden" name="form-MAX_NUM_FORMS" value="1000"
5+
id="id_form-MAX_NUM_FORMS"> </div>
6+
<table class="table table-striped table-sm">
7+
<thead>
8+
<tr>
9+
<th for="id_form-0-is_company" class="col-form-label "> company </th>
10+
<th for="id_form-0-email" class="col-form-label requiredField"> email<span class="asteriskField">*</span>
11+
</th>
12+
<th for="id_form-0-password1" class="col-form-label requiredField"> password<span
13+
class="asteriskField">*</span> </th>
14+
<th for="id_form-0-password2" class="col-form-label requiredField"> re-enter password<span
15+
class="asteriskField">*</span> </th>
16+
<th for="id_form-0-first_name" class="col-form-label requiredField"> first name<span
17+
class="asteriskField">*</span> </th>
18+
<th for="id_form-0-last_name" class="col-form-label requiredField"> last name<span
19+
class="asteriskField">*</span> </th>
20+
<th for="id_form-0-datetime_field" class="col-form-label requiredField"> date time<span
21+
class="asteriskField">*</span> </th>
22+
</tr>
23+
</thead>
24+
<tbody>
25+
<tr class="d-none empty-form">
26+
<div class="mb-3">
27+
<td id="div_id_form-__prefix__-is_company" class="mb-3"> <input type="checkbox"
28+
name="form-__prefix__-is_company" class="checkboxinput form-check-input"
29+
id="id_form-__prefix__-is_company"> </td>
30+
</div>
31+
<td id="div_id_form-__prefix__-email" class="mb-3"> <input type="text" name="form-__prefix__-email"
32+
maxlength="30" class="textinput textInput inputtext form-control" id="id_form-__prefix__-email"> <small
33+
id="hint_id_form-__prefix__-email" class="form-text text-muted">Insert your email</small> </td>
34+
<td id="div_id_form-__prefix__-password1" class="mb-3"> <input type="password"
35+
name="form-__prefix__-password1" maxlength="30" class="textinput textInput form-control"
36+
id="id_form-__prefix__-password1"> </td>
37+
<td id="div_id_form-__prefix__-password2" class="mb-3"> <input type="password"
38+
name="form-__prefix__-password2" maxlength="30" class="textinput textInput form-control"
39+
id="id_form-__prefix__-password2"> </td>
40+
<td id="div_id_form-__prefix__-first_name" class="mb-3"> <input type="text" name="form-__prefix__-first_name"
41+
maxlength="5" class="textinput textInput inputtext form-control" id="id_form-__prefix__-first_name"> </td>
42+
<td id="div_id_form-__prefix__-last_name" class="mb-3"> <input type="text" name="form-__prefix__-last_name"
43+
maxlength="5" class="textinput textInput inputtext form-control" id="id_form-__prefix__-last_name"> </td>
44+
<td id="div_id_form-__prefix__-datetime_field" class="mb-3"> <input type="text"
45+
name="form-__prefix__-datetime_field_0" class="dateinput form-control"
46+
id="id_form-__prefix__-datetime_field_0"><input type="text" name="form-__prefix__-datetime_field_1"
47+
class="timeinput form-control" id="id_form-__prefix__-datetime_field_1"> </td>
48+
</tr>
49+
<tr>
50+
<div class="mb-3">
51+
<td id="div_id_form-0-is_company" class="mb-3"> <input type="checkbox" name="form-0-is_company"
52+
class="checkboxinput form-check-input" id="id_form-0-is_company"> </td>
53+
</div>
54+
<td id="div_id_form-0-email" class="mb-3"> <input type="text" name="form-0-email" maxlength="30"
55+
class="textinput textInput inputtext form-control" id="id_form-0-email"> <small id="hint_id_form-0-email"
56+
class="form-text text-muted">Insert your email</small> </td>
57+
<td id="div_id_form-0-password1" class="mb-3"> <input type="password" name="form-0-password1" maxlength="30"
58+
class="textinput textInput form-control" id="id_form-0-password1"> </td>
59+
<td id="div_id_form-0-password2" class="mb-3"> <input type="password" name="form-0-password2" maxlength="30"
60+
class="textinput textInput form-control" id="id_form-0-password2"> </td>
61+
<td id="div_id_form-0-first_name" class="mb-3"> <input type="text" name="form-0-first_name" maxlength="5"
62+
class="textinput textInput inputtext form-control" id="id_form-0-first_name"> </td>
63+
<td id="div_id_form-0-last_name" class="mb-3"> <input type="text" name="form-0-last_name" maxlength="5"
64+
class="textinput textInput inputtext form-control" id="id_form-0-last_name"> </td>
65+
<td id="div_id_form-0-datetime_field" class="mb-3"> <input type="text" name="form-0-datetime_field_0"
66+
class="dateinput form-control" id="id_form-0-datetime_field_0"><input type="text"
67+
name="form-0-datetime_field_1" class="timeinput form-control" id="id_form-0-datetime_field_1"> </td>
68+
</tr>
69+
<tr>
70+
<div class="mb-3">
71+
<td id="div_id_form-1-is_company" class="mb-3"> <input type="checkbox" name="form-1-is_company"
72+
class="checkboxinput form-check-input" id="id_form-1-is_company"> </td>
73+
</div>
74+
<td id="div_id_form-1-email" class="mb-3"> <input type="text" name="form-1-email" maxlength="30"
75+
class="textinput textInput inputtext form-control" id="id_form-1-email"> <small id="hint_id_form-1-email"
76+
class="form-text text-muted">Insert your email</small> </td>
77+
<td id="div_id_form-1-password1" class="mb-3"> <input type="password" name="form-1-password1" maxlength="30"
78+
class="textinput textInput form-control" id="id_form-1-password1"> </td>
79+
<td id="div_id_form-1-password2" class="mb-3"> <input type="password" name="form-1-password2" maxlength="30"
80+
class="textinput textInput form-control" id="id_form-1-password2"> </td>
81+
<td id="div_id_form-1-first_name" class="mb-3"> <input type="text" name="form-1-first_name" maxlength="5"
82+
class="textinput textInput inputtext form-control" id="id_form-1-first_name"> </td>
83+
<td id="div_id_form-1-last_name" class="mb-3"> <input type="text" name="form-1-last_name" maxlength="5"
84+
class="textinput textInput inputtext form-control" id="id_form-1-last_name"> </td>
85+
<td id="div_id_form-1-datetime_field" class="mb-3"> <input type="text" name="form-1-datetime_field_0"
86+
class="dateinput form-control" id="id_form-1-datetime_field_0"><input type="text"
87+
name="form-1-datetime_field_1" class="timeinput form-control" id="id_form-1-datetime_field_1"> </td>
88+
</tr>
89+
<tr>
90+
<div class="mb-3">
91+
<td id="div_id_form-2-is_company" class="mb-3"> <input type="checkbox" name="form-2-is_company"
92+
class="checkboxinput form-check-input" id="id_form-2-is_company"> </td>
93+
</div>
94+
<td id="div_id_form-2-email" class="mb-3"> <input type="text" name="form-2-email" maxlength="30"
95+
class="textinput textInput inputtext form-control" id="id_form-2-email"> <small id="hint_id_form-2-email"
96+
class="form-text text-muted">Insert your email</small> </td>
97+
<td id="div_id_form-2-password1" class="mb-3"> <input type="password" name="form-2-password1" maxlength="30"
98+
class="textinput textInput form-control" id="id_form-2-password1"> </td>
99+
<td id="div_id_form-2-password2" class="mb-3"> <input type="password" name="form-2-password2" maxlength="30"
100+
class="textinput textInput form-control" id="id_form-2-password2"> </td>
101+
<td id="div_id_form-2-first_name" class="mb-3"> <input type="text" name="form-2-first_name" maxlength="5"
102+
class="textinput textInput inputtext form-control" id="id_form-2-first_name"> </td>
103+
<td id="div_id_form-2-last_name" class="mb-3"> <input type="text" name="form-2-last_name" maxlength="5"
104+
class="textinput textInput inputtext form-control" id="id_form-2-last_name"> </td>
105+
<td id="div_id_form-2-datetime_field" class="mb-3"> <input type="text" name="form-2-datetime_field_0"
106+
class="dateinput form-control" id="id_form-2-datetime_field_0"><input type="text"
107+
name="form-2-datetime_field_1" class="timeinput form-control" id="id_form-2-datetime_field_1"> </td>
108+
</tr>
109+
</tbody>
110+
</table>
111+
</form>

0 commit comments

Comments
 (0)