1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
Layout example with Bootstrap
=============================
If you use Floppyforms with Bootstrap you might be interested in using a
bootstrap layout for your form.
What you have to do is to create those two templates:
**floppyforms/templates/floppyforms/layouts/bootstrap.html**:
.. code-block:: django
{% load floppyforms %}{% block formconfig %}{% formconfig row using "floppyforms/rows/bootstrap.html" %}{% endblock %}
{% block forms %}{% for form in forms %}
{% block errors %}
{% for error in form.non_field_errors %}
<div class="alert alert-error">
<a class="close" href="#" data-dismiss="alert">×</a>
{{ error }}
</div><!--- .alert.alert-error -->
{% endfor %}
{% for error in form|hidden_field_errors %}
<div class="alert alert-error">
<a class="close" href="#" data-dismiss="alert">×</a>
{{ error }}
</div><!--- .alert.alert-error -->
{% endfor %}
{% endblock errors %}
{% block rows %}
{% for field in form.visible_fields %}
{% if forloop.last %}{% formconfig row with hidden_fields=form.hidden_fields %}{% endif %}
{% block row %}{% formrow field %}{% endblock %}
{% endfor %}
{% if not form.visible_fields %}{% for field in form.hidden_fields %}{% formfield field %}{% endfor %}{% endif %}
{% endblock %}
{% endfor %}{% endblock %}
**floppyforms/templates/floppyforms/rows/bootstrap.html**:
.. code-block:: django
{% load floppyforms %}{% block row %}{% for field in fields %}
<div class="control-group{% if field.errors %} error{% endif %}">
{% with classes=field.css_classes label=label|default:field.label help_text=help_text|default:field.help_text %}
{% block label %}{% if field|id %}<label class="control-label" for="{{ field|id }}">{% endif %}{{ label }}{% if field.field.required %} <span class="required">*</span>{% endif %}{% if label|last not in ".:!?" %}:{% endif %}{% if field|id %}</label>{% endif %}{% endblock %}
{% block field %}
<div class="controls {{ classes }} field-{{ field.name }}">
{% block widget %}{% formfield field %}{% endblock %}
{% block errors %}{% include "floppyforms/errors.html" with errors=field.errors %}{% endblock %}
{% block help_text %}{% if field.help_text %}
<p class="help-block">{{ field.help_text }}</p>
{% endif %}{% endblock %}
{% block hidden_fields %}{% for field in hidden_fields %}{{ field.as_hidden }}{% endfor %}{% endblock %}
</div><!--- .controls -->
{% endblock %}
{% endwith %}
</div><!--- .control-group{% if field.errors %}.error{% endif %} -->
{% endfor %}{% endblock %}
You can also define this layout by default:
**floppyforms/templates/floppyforms/layouts/default.html**:
.. code-block:: django
{% extends "floppyforms/layouts/bootstrap.html" %}
You can also make a change to the error display:
**floppyforms/templates/floppyforms/errors.html**:
.. code-block:: django
{% if errors %}<span class="help-inline">{% for error in errors %}{{ error }}{% if not forloop.last %}<br />{% endif %}{% endfor %}</span>{% endif %}
And that's it, you now have a perfect display for your form with bootstrap.
|
