Added support for bootstrap 3 horizontal forms

Based on @danielmt work, it should fix #209
django-crispy-forms · Aug 28, 2013 · 07b8783 · 07b8783
1 parent b3af280
commit 07b8783
Show file tree

Hide file tree

Showing 13 changed files with 92 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 Special thanks in this release to **James Friedman <a href="https://github.com/jamesmfriedman">@jamesmfriedman</a>**, for his amazing support in PR #213, adding Bootstrap 3 support.
 
+ * Added support for horizontal forms in bootstrap3, see #209.
  * Fixed spaces missing when rendering several submit inputs continued, see #211.
  * Fixed checkboxes and radios for Bootstrap3, adjusted multiple inline radios and checkboxes, see #225.
  * Update accordion markup for bootstrap3 compatibilty, see #229.

diff --git a/CONTRIBUTORS.txt b/CONTRIBUTORS.txt
@@ -91,3 +91,4 @@ Contributors
 * Gabe Jackson <gabejackson>
 * Camilo Nova <camilonova>
 * <mrkre>
+* Daniel Mascarenhas <danielmt>
diff --git a/crispy_forms/helper.py b/crispy_forms/helper.py
@@ -1,3 +1,6 @@
+# -*- coding: utf-8 -*-
+import re
+
 from django.core.urlresolvers import reverse, NoReverseMatch
 from django.utils.safestring import mark_safe
 
@@ -198,6 +201,8 @@ def helper(self):
     template = None
     field_template = None
     disable_csrf = False
+    label_class = ''
+    label_size = ''
 
     def __init__(self, form=None):
         self.attrs = {}
@@ -337,6 +342,14 @@ def get_attributes(self, template_pack=TEMPLATE_PACK):
         items['html5_required'] = self.html5_required
         items['form_show_labels'] = self.form_show_labels
         items['disable_csrf'] = self.disable_csrf
+        items['label_class'] = self.label_class
+        items['field_class'] = self.field_class
+        label_size_match = re.match('col-lg-(\d+)', self.label_class)
+        if label_size_match:
+            try:
+                items['label_size'] = int(label_size_match.groups()[0])
+            except:
+                pass
 
         items['attrs'] = {}
         if self.attrs:

diff --git a/crispy_forms/templates/bootstrap3/field.html b/crispy_forms/templates/bootstrap3/field.html
@@ -3,9 +3,12 @@
 {% if field.is_hidden %}
 	{{ field }}
 {% else %}
+    {% if field|is_checkbox %}
+        <div class="form-group">
+    {% endif %}
 	<{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" {% if not field|is_checkbox %}class="form-group{% else %}class="checkbox{% endif %}{% if wrapper_class %} {{ wrapper_class }}{% endif %}{% if form_show_errors%}{% if field.errors %} has-error{% endif %}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
 		{% if field.label and not field|is_checkbox and form_show_labels %}
-			<label for="{{ field.id_for_label }}" class="control-label {% if field.field.required %}requiredField{% endif %}">
+			<label for="{{ field.id_for_label }}" class="control-label {{ label_class }}{% if field.field.required %} requiredField{% endif %}">
 				{{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
 			</label>
 		{% endif %}
@@ -20,17 +23,26 @@
 
         {% if not field|is_checkboxselectmultiple and not field|is_radioselect %}
             {% if field|is_checkbox and form_show_labels %}
-                <label for="{{ field.id_for_label }}" class="{% if field.field.required %}requiredField{% endif %}">
+                {% if label_class %}
+                    <div class="controls col-lg-offset-{{ label_size }} {{ field_class }}">
+                {% endif %}
+                <label for="{{ field.id_for_label }}" class="{% if field.field.required %} requiredField{% endif %}">
                     {% crispy_field field %}
                     {{ field.label|safe }}
                     {% include 'bootstrap3/layout/help_text_and_errors.html' %}
                 </label>
+                {% if label_class %}
+                    </div>
+                {% endif %}
             {% else %}
-                <div class="controls">
+                <div class="controls {{ field_class }}">
                     {% crispy_field field %}
                     {% include 'bootstrap3/layout/help_text_and_errors.html' %}
                 </div>
             {% endif %}
         {% endif %}
 	</{% if tag %}{{ tag }}{% else %}div{% endif %}>
+    {% if field|is_checkbox %}
+        </div>
+    {% endif %}
 {% endif %}
diff --git a/crispy_forms/templates/bootstrap3/field.html.bk b/crispy_forms/templates/bootstrap3/field.html.bk
@@ -0,0 +1,49 @@
+{% load crispy_forms_field %}
+
+{% if field.is_hidden %}
+	{{ field }}
+{% else %}
+    {% if field|is_checkbox %}
+        <div class="form-group">
+    {% endif %}
+	<{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" {% if not field|is_checkbox %}class="form-group{% else %}class="checkbox{% endif %}{% if wrapper_class %} {{ wrapper_class }}{% endif %}{% if form_show_errors%}{% if field.errors %} has-error{% endif %}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
+		{% if field.label and not field|is_checkbox and form_show_labels %}
+			<label for="{{ field.id_for_label }}" class="control-label {{ label_class }}{% if field.field.required %} requiredField{% endif %}">
+				{{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
+			</label>
+		{% endif %}
+
+        {% if field|is_checkboxselectmultiple %}
+            {% include 'bootstrap3/layout/checkboxselectmultiple.html' %}
+        {% endif %}
+
+        {% if field|is_radioselect %}
+            {% include 'bootstrap3/layout/radioselect.html' %}
+        {% endif %}
+
+        {% if not field|is_checkboxselectmultiple and not field|is_radioselect %}
+            {% if field|is_checkbox and form_show_labels %}
+                {% if label_class %}
+                    <label class="{{ label_class }}"></label>
+                    <div class="controls {{ field_class }}">
+                {% endif %}
+                <label for="{{ field.id_for_label }}" class="{% if field.field.required %} requiredField{% endif %}">
+                    {% crispy_field field %}
+                    {{ field.label|safe }}
+                    {% include 'bootstrap3/layout/help_text_and_errors.html' %}
+                </label>
+                {% if label_class %}
+                    </div>
+                {% endif %}
+            {% else %}
+                <div class="controls {{ field_class }}">
+                    {% crispy_field field %}
+                    {% include 'bootstrap3/layout/help_text_and_errors.html' %}
+                </div>
+            {% endif %}
+        {% endif %}
+	</{% if tag %}{{ tag }}{% else %}div{% endif %}>
+    {% if field|is_checkbox %}
+        </div>
+    {% endif %}
+{% endif %}
diff --git a/crispy_forms/templates/bootstrap3/layout/checkboxselectmultiple.html b/crispy_forms/templates/bootstrap3/layout/checkboxselectmultiple.html
@@ -1,4 +1,4 @@
-<div class="controls"{% if flat_attrs %} {{ flat_attrs|safe }}{% endif %}>
+<div class="controls {{ field_class }}"{% if flat_attrs %} {{ flat_attrs|safe }}{% endif %}>
     {% include 'bootstrap3/layout/field_errors_block.html' %}
 
     {% for choice in field.field.choices %}

diff --git a/crispy_forms/templates/bootstrap3/layout/checkboxselectmultiple_inline.html b/crispy_forms/templates/bootstrap3/layout/checkboxselectmultiple_inline.html
@@ -4,7 +4,7 @@
     <div id="div_{{ field.auto_id }}" class="form-group{% if form_show_errors and field.errors %} has-error{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
 
         {% if field.label %}
-            <label for="{{ field.auto_id }}"  class="control-label{% if field.field.required %} requiredField{% endif %}">
+            <label for="{{ field.auto_id }}"  class="control-label {{ label_class }}{% if field.field.required %} requiredField{% endif %}">
                 {{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
             </label>
         {% endif %}

diff --git a/crispy_forms/templates/bootstrap3/layout/field_with_buttons.html b/crispy_forms/templates/bootstrap3/layout/field_with_buttons.html
@@ -2,12 +2,12 @@
 
 <div{% if div.css_id %} id="{{ div.css_id }}"{% endif %} class="form-group{% if form_show_errors and field.errors %} has-error{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}{% if div.css_class %} {{ div.css_class }}{% endif %}" {{ div.flat_attrs|safe }}>
     {% if field.label %}
-        <label for="{{ field.id_for_label }}" class="control-label{% if field.field.required %} requiredField{% endif %}">
+        <label for="{{ field.id_for_label }}" class="control-label {{ label_class }}{% if field.field.required %} requiredField{% endif %}">
             {{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
         </label>
     {% endif %}
 
-    <div class="controls">
+    <div class="controls {{ field_class }}">
         <div class="input-group">
             {% crispy_field field %}
             <span class="input-group-btn{% if active %} active{% endif %}{% if input_size %} {{ input_size }}{% endif %}">{{ buttons|safe }}</span>

diff --git a/crispy_forms/templates/bootstrap3/layout/prepended_appended_text.html b/crispy_forms/templates/bootstrap3/layout/prepended_appended_text.html
@@ -6,12 +6,12 @@
     <div id="div_{{ field.auto_id }}" class="form-group{% if form_show_errors and field.errors %} has-error{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
 
         {% if field.label %}
-            <label for="{{ field.id_for_label }}" class="control-label{% if field.field.required %} requiredField{% endif %}">
+            <label for="{{ field.id_for_label }}" class="control-label {{ label_class }}{% if field.field.required %} requiredField{% endif %}">
                 {{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
             </label>
         {% endif %}
 
-        <div class="controls">
+        <div class="controls {{ field_class }}">
             <div class="input-group">
                 {% if crispy_prepended_text %}<span class="input-group-addon{% if active %} active{% endif %}{% if input_size %} {{ input_size }}{% endif %}">{{ crispy_prepended_text|safe }}</span>{% endif %}
                 {% crispy_field field %}

diff --git a/crispy_forms/templates/bootstrap3/layout/radioselect.html b/crispy_forms/templates/bootstrap3/layout/radioselect.html
@@ -1,4 +1,4 @@
-<div class="controls"{% if flat_attrs %} {{ flat_attrs|safe }}{% endif %}>
+<div class="controls {{ field_class }}"{% if flat_attrs %} {{ flat_attrs|safe }}{% endif %}>
     {% include 'bootstrap3/layout/field_errors_block.html' %}
 
     {% for choice in field.field.choices %}

diff --git a/crispy_forms/templates/bootstrap3/layout/radioselect_inline.html b/crispy_forms/templates/bootstrap3/layout/radioselect_inline.html
@@ -4,7 +4,7 @@
     <div id="div_{{ field.auto_id }}" class="form-group{% if form_show_errors and field.errors %} has-error{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
 
         {% if field.label %}
-            <label for="{{ field.auto_id }}"  class="control-label{% if field.field.required %} requiredField{% endif %}">
+            <label for="{{ field.auto_id }}"  class="control-label {{ label_class }}{% if field.field.required %} requiredField{% endif %}">
                 {{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
             </label>
         {% endif %}

diff --git a/crispy_forms/templates/bootstrap3/layout/uneditable_input.html b/crispy_forms/templates/bootstrap3/layout/uneditable_input.html
@@ -2,8 +2,8 @@
 
 
 <div id="div_{{ field.auto_id }}" class="form-group{% if form_show_errors and field.errors %} error{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
-    <label class="control-label{% if field.field.required %} requiredField{% endif %}">{{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}</label>
-    <div class="controls">
+    <label class="control-label {{ label_class }}{% if field.field.required %} requiredField{% endif %}">{{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}</label>
+    <div class="controls {{ field_class }}">
         {% crispy_field field 'disabled' 'disabled' %}
         {% include 'bootstrap3/layout/help_text.html' %}
     </div>

diff --git a/crispy_forms/templatetags/crispy_forms_tags.py b/crispy_forms/templatetags/crispy_forms_tags.py
@@ -175,6 +175,9 @@ def get_response_dict(self, helper, context, is_formset):
             '%s_attrs' % form_type: attrs.get('attrs', ''),
             'flat_attrs': attrs.get('flat_attrs', ''),
             'error_text_inline': attrs.get('error_text_inline', True),
+            'label_class': attrs.get('label_class', ''),
+            'label_size': attrs.get('label_size', 0),
+            'field_class': attrs.get('field_class', ''),
         }
 
         # Handles custom attributes added to helpers