Skip to content

Commit a187da0

Browse files
smithdc1smithdc1
committed
Horizontal forms
* checkbox are now fully custom by default in Bootstrap5 - removed previous tweaks. * control-label --> col-form-label * errors now need `invalid-feedback` on the text and `is-invalid` on the input * new `form-text` class for help text * New html layout and css classes for radio/multiple checkbox. Added work around for errors and inline (see comments in code).
1 parent 06732f6 commit a187da0

File tree

12 files changed

+77
-111
lines changed

12 files changed

+77
-111
lines changed

‎rest_framework/static/rest_framework/css/bootstrap-tweaks.css

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -198,20 +198,6 @@ body a:hover {
198198
clear:both;
199199
}
200200

201-
.horizontal-checkbox label {
202-
padding-top: 0;
203-
}
204-
205-
.horizontal-checkbox label {
206-
padding-top: 0 !important;
207-
}
208-
209-
.horizontal-checkbox input {
210-
float: left;
211-
width: 20px;
212-
margin-top: 3px;
213-
}
214-
215201
.modal-footer form {
216202
margin-left: 5px;
217203
margin-right: 5px;

‎rest_framework/templates/rest_framework/horizontal/checkbox.html

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
1-
<div class="mb-3 horizontal-checkbox {% if field.errors %}has-error{% endif %}">
1+
<div class="mb-3 row">
22
{% if field.label %}
3-
<label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
3+
<label class="col-sm-2 col-form-label pt-0 {% if style.hide_label %}sr-only{% endif %}">
44
{{ field.label }}
55
</label>
66
{% endif %}
77

88
<div class="col-sm-10">
9-
<input type="checkbox" name="{{ field.name }}" value="true" {% if field.value %}checked{% endif %}>
9+
<div class="col-sm-10">
10+
<input class="form-check-input {% if field.errors %}is-invalid{% endif %}" type="checkbox" name="{{ field.name }}" value="true" {% if field.value %}checked{% endif %}>
1011

1112
{% if field.errors %}
1213
{% for error in field.errors %}
13-
<span class="help-block">{{ error }}</span>
14+
<span class="invalid-feedback">{{ error }}</span>
1415
{% endfor %}
1516
{% endif %}
1617

1718
{% if field.help_text %}
18-
<span class="help-block">{{ field.help_text|safe }}</span>
19+
<span class="form-text">{{ field.help_text|safe }}</span>
1920
{% endif %}
2021
</div>
22+
</div>
2123
</div>

‎rest_framework/templates/rest_framework/horizontal/checkbox_multiple.html

Lines changed: 19 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,32 @@
11
{% load rest_framework %}
22

3-
<div class="mb-3">
3+
<div class="mb-3 row">
44
{% if field.label %}
5-
<label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
5+
<label class="col-sm-2 col-form-label pt-0 {% if style.hide_label %}sr-only{% endif %}">
66
{{ field.label }}
77
</label>
88
{% endif %}
99

1010
<div class="col-sm-10">
11-
{% if style.inline %}
12-
{% for key, text in field.choices|items %}
13-
<label class="checkbox-inline">
14-
<input type="checkbox" name="{{ field.name }}" value="{{ key }}" {% if key|as_string in field.value|as_list_of_strings %}checked{% endif %}>
15-
{{ text }}
16-
</label>
17-
{% endfor %}
18-
{% else %}
19-
{% for key, text in field.choices|items %}
20-
<div class="checkbox">
21-
<label>
22-
<input type="checkbox" name="{{ field.name }}" value="{{ key }}" {% if key|as_string in field.value|as_list_of_strings %}checked{% endif %}>
23-
{{ text }}
24-
</label>
25-
</div>
11+
{% for key, text in field.choices|items %}
12+
<div class="form-check {% if style.inline %}form-check-inline {% endif %}">
13+
<input class="form-check-input {% if field.errors %}is-invalid{% endif %}" type="checkbox" name="{{ field.name }}" value="{{ key }}" {% if key|as_string in field.value|as_list_of_strings %}checked{% endif %}>
14+
<label class="form-check-label">{{ text }}</label>
15+
</div>
16+
{% endfor %}
17+
18+
{% if field.errors %}
19+
{# A fake input to trigger the error messages as it needs to be after a valid input #}
20+
{# If it's with the last input and it's inline then the error stacks under the last input label #}
21+
{# It has no name so no data will be sent #}
22+
<input type="radio" class="is-invalid" style="display: none"/>
23+
{% for error in field.errors %}
24+
<span class="invalid-feedback">{{ error }}</span>
2625
{% endfor %}
2726
{% endif %}
2827

29-
{% if field.errors %}
30-
{% for error in field.errors %}
31-
<span class="help-block">{{ error }}</span>
32-
{% endfor %}
33-
{% endif %}
34-
35-
{% if field.help_text %}
36-
<span class="help-block">{{ field.help_text|safe }}</span>
37-
{% endif %}
28+
{% if field.help_text %}
29+
<p class="form-text">{{ field.help_text|safe }}</p>
30+
{% endif %}
3831
</div>
3932
</div>

‎rest_framework/templates/rest_framework/horizontal/dict_field.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
<div class="mb-3">
1+
<div class="mb-3 row">
22
{% if field.label %}
3-
<label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
3+
<label class="col-sm-2 col-form-label {% if style.hide_label %}sr-only{% endif %}">
44
{{ field.label }}
55
</label>
66
{% endif %}
77

88
<div class="col-sm-10">
9-
<p class="form-control-static">Dictionaries are not currently supported in HTML input.</p>
9+
<p class="col-form-label">Dictionaries are not currently supported in HTML input.</p>
1010
</div>
1111
</div>

‎rest_framework/templates/rest_framework/horizontal/fieldset.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{% load rest_framework %}
22
<fieldset>
33
{% if field.label %}
4-
<div class="mb-3" style="border-bottom: 1px solid #e5e5e5">
5-
<legend class="control-label col-sm-2 {% if style.hide_label %}sr-only{% endif %}" style="border-bottom: 0">
4+
<div class="mb-3 row" style="border-bottom: 1px solid #e5e5e5">
5+
<legend class="col-form-label col-sm-2 {% if style.hide_label %}sr-only{% endif %}" style="border-bottom: 0">
66
{{ field.label }}
77
</legend>
88
</div>

‎rest_framework/templates/rest_framework/horizontal/input.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1-
<div class="mb-3 {% if field.errors %}has-error{% endif %}">
1+
<div class="mb-3 row">
22
{% if field.label %}
3-
<label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
3+
<label class="col-sm-2 col-form-label {% if style.hide_label %}sr-only{% endif %}">
44
{{ field.label }}
55
</label>
66
{% endif %}
77

88
<div class="col-sm-10">
9-
<input name="{{ field.name }}" {% if style.input_type != "file" %}class="form-control"{% endif %} type="{{ style.input_type }}" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if field.value is not None %}value="{{ field.value }}"{% endif %} {% if style.autofocus and style.input_type != "hidden" %}autofocus{% endif %}>
9+
<input name="{{ field.name }}" {% if style.input_type != "file" %}class="form-control{% if field.errors %} is-invalid{% endif %}"{% endif %} type="{{ style.input_type }}" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if field.value is not None %}value="{{ field.value }}"{% endif %} {% if style.autofocus and style.input_type != "hidden" %}autofocus{% endif %}>
1010

1111
{% if field.errors %}
1212
{% for error in field.errors %}
13-
<span class="help-block">{{ error }}</span>
13+
<span class="invalid-feedback">{{ error }}</span>
1414
{% endfor %}
1515
{% endif %}
1616

1717
{% if field.help_text %}
18-
<span class="help-block">{{ field.help_text|safe }}</span>
18+
<span class="form-text">{{ field.help_text|safe }}</span>
1919
{% endif %}
2020
</div>
2121
</div>

‎rest_framework/templates/rest_framework/horizontal/list_field.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
<div class="mb-3">
1+
<div class="mb-3 row">
22
{% if field.label %}
3-
<label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
3+
<label class="col-sm-2 col-form-label {% if style.hide_label %}sr-only{% endif %}">
44
{{ field.label }}
55
</label>
66
{% endif %}
77

88
<div class="col-sm-10">
9-
<p class="form-control-static">Lists are not currently supported in HTML input.</p>
9+
<p class="col-form-label">Lists are not currently supported in HTML input.</p>
1010
</div>
1111
</div>

‎rest_framework/templates/rest_framework/horizontal/list_fieldset.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
<fieldset>
44
{% if field.label %}
5-
<div class="mb-3" style="border-bottom: 1px solid #e5e5e5">
6-
<legend class="control-label col-sm-2 {% if style.hide_label %}sr-only{% endif %}" style="border-bottom: 0">
5+
<div class="mb-3 row" style="border-bottom: 1px solid #e5e5e5">
6+
<legend class="col-form-label col-sm-2 {% if style.hide_label %}sr-only{% endif %}" style="border-bottom: 0">
77
{{ field.label }}
88
</legend>
99
</div>

‎rest_framework/templates/rest_framework/horizontal/radio.html

Lines changed: 21 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,55 +3,40 @@
33

44
{% trans "None" as none_choice %}
55

6-
<div class="mb-3">
6+
<div class="mb-3 row">
77
{% if field.label %}
8-
<label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
8+
<label class="col-sm-2 col-form-label pt-0 {% if style.hide_label %}sr-only{% endif %}">
99
{{ field.label }}
1010
</label>
1111
{% endif %}
1212

1313
<div class="col-sm-10">
14-
{% if style.inline %}
15-
{% if field.allow_null or field.allow_blank %}
16-
<label class="radio-inline">
17-
<input type="radio" name="{{ field.name }}" value="" {% if not field.value %}checked{% endif %} />
18-
{{ none_choice }}
19-
</label>
20-
{% endif %}
21-
22-
{% for key, text in field.choices|items %}
23-
<label class="radio-inline">
24-
<input type="radio" name="{{ field.name }}" value="{{ key }}" {% if key|as_string == field.value|as_string %}checked{% endif %} />
25-
{{ text }}
26-
</label>
27-
{% endfor %}
28-
{% else %}
29-
{% if field.allow_null or field.allow_blank %}
30-
<div class="radio">
31-
<label>
32-
<input type="radio" name="{{ field.name }}" value="" {% if not field.value %}checked{% endif %} />
33-
{{ none_choice }}
34-
</label>
35-
</div>
36-
{% endif %}
37-
{% for key, text in field.choices|items %}
38-
<div class="radio">
39-
<label>
40-
<input type="radio" name="{{ field.name }}" value="{{ key }}" {% if key|as_string == field.value|as_string %}checked{% endif %} />
41-
{{ text }}
42-
</label>
43-
</div>
44-
{% endfor %}
14+
{% if field.allow_null or field.allow_blank %}
15+
<div class="form-check {% if style.inline %}form-check-inline {% endif %}">
16+
<input class="form-check-input" type="radio" name="{{ field.name }}" value="" {% if not field.value %}checked{% endif %} />
17+
<label class="form-check-label">{{ none_choice }}</label>
18+
</div>
4519
{% endif %}
4620

21+
{% for key, text in field.choices|items %}
22+
<div class="form-check {% if style.inline %}form-check-inline {% endif %}">
23+
<input class="form-check-input {% if field.errors %}is-invalid{% endif %}" type="radio" name="{{ field.name }}" value="{{ key }}" {% if key|as_string == field.value|as_string %}checked{% endif %} />
24+
<label class="form-check-label">{{ text }}</label>
25+
</div>
26+
{% endfor %}
27+
4728
{% if field.errors %}
29+
{# A fake input to trigger the error messages as it needs to be after a valid input #}
30+
{# If it's with the last input and it's inline then the error stacks under the last input label #}
31+
{# It has no name so no data will be sent #}
32+
<input type="radio" class="is-invalid" style="display: none"/>
4833
{% for error in field.errors %}
49-
<span class="help-block">{{ error }}</span>
34+
<span class="invalid-feedback">{{ error }}</span>
5035
{% endfor %}
5136
{% endif %}
5237

5338
{% if field.help_text %}
54-
<span class="help-block">{{ field.help_text|safe }}</span>
39+
<p class="form-text">{{ field.help_text|safe }}</p>
5540
{% endif %}
5641
</div>
57-
</div>
42+
</div>

‎rest_framework/templates/rest_framework/horizontal/select.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
{% load rest_framework %}
22

3-
<div class="mb-3">
3+
<div class="mb-3 row">
44
{% if field.label %}
5-
<label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
5+
<label class="col-sm-2 col-form-label {% if style.hide_label %}sr-only{% endif %}">
66
{{ field.label }}
77
</label>
88
{% endif %}
99

1010
<div class="col-sm-10">
11-
<select class="form-control" name="{{ field.name }}">
11+
<select class="form-select{% if field.errors %} is-invalid{% endif %}" name="{{ field.name }}">
1212
{% if field.allow_null or field.allow_blank %}
1313
<option value="" {% if not field.value %}selected{% endif %}>--------</option>
1414
{% endif %}
@@ -25,12 +25,12 @@
2525

2626
{% if field.errors %}
2727
{% for error in field.errors %}
28-
<span class="help-block">{{ error }}</span>
28+
<span class="invalid-feedback">{{ error }}</span>
2929
{% endfor %}
3030
{% endif %}
3131

3232
{% if field.help_text %}
33-
<span class="help-block">{{ field.help_text|safe }}</span>
33+
<span class="form-text">{{ field.help_text|safe }}</span>
3434
{% endif %}
3535
</div>
3636
</div>

0 commit comments

Comments
 (0)